Search plugin

The search plugin provides a button or control to search for given keyword.

Install

npm install '@react-pdf-viewer/search';
The search plugin is included in the toolbar and default-layout plugins

Usage

1. Import the plugin and styles
import { searchPlugin } from '@react-pdf-viewer/search';
// Import styles
import '@react-pdf-viewer/search/lib/styles/index.css';
2. Create the plugin instance
const searchPluginInstance = searchPlugin(props?: SearchPluginProps);
The optional parameter SearchPluginProps represents an object of the property:
(? denotes an optional property)
PropertyTypeDescriptionFrom
enableShortcuts?booleanEnable shortcuts2.9.0
keyword?string, RegExp or FlagKeywordThe initial keyword that will be highlighted in all pages2.0.0
string[], RegExp[] or FlagKeyword[]You can set multiple keywords to be highlighted initially2.1.0
See the Highlight multiple keywords initially example
onHighlightKeywordFunctionInvoked when a keyword is highlighted2.4.0
See the Add custom styles to the highlighted elements example
By default, the shortcuts are enabled. Users can press ctrl + F to open the search popover.
The plugin instance searchPluginInstance provides the following properties:
PropertyTypeDescriptionFrom
SearchReactElementCustomizable search control2.2.0
See the Create a custom search control example
ShowSearchPopoverReactElementCustomizable button to show the search popover2.0.0
See the Customize the button to show the search popover example
ShowSearchPopoverButtonReactElementThe default button to show the search popover2.0.0
See the Use the default button to show the search popover example
clearHighlightsFunctionClear the highlights2.4.0
highlightFunctionHighlight multiple keywords2.4.0
See the Highlight keywords programmatically example
jumpToMatchFunctionJump to a given match2.7.0
jumpToNextMatchFunctionJump to the next match2.4.0
jumpToPreviousMatchFunctionJump to the previous match2.4.0
setTargetPagesFunctionSet the pages that you want to search in2.7.2
3. Register the plugin
Register the search plugin instance:
<Viewer plugins={[searchPluginInstance]} />

Properties

The search plugin provides other useful properties as following:
import { NextIcon, PreviousIcon, SearchIcon } from '@react-pdf-viewer/search';
PropertyTypeDescriptionFrom
NextIconReactElementThe icon used to go to the next match in the document2.0.0
PreviousIconReactElementThe icon used to go to the previous match in the document2.0.0
SearchIconReactElementThe search icon2.0.0

See also

Changelog

v2.9.0
  • Automatically focus on the keyword input in the search popover
  • Support shortcuts
v2.8.0
  • The highlighting elements should be shown below the text, so users can still select the text
v2.7.2
  • Be able to set the pages that you want to search in via the setTargetPages function
v2.7.0
  • Add a background color to the current search highlight
  • Add new jumpToMatch function which jumps to the given match
  • Custom search control isn't rendered
  • Show a loading indicator while searching for a keyword
  • The highlight function now returns a Promise that holds the results
  • The search popover isn't shown until the document is loaded
v2.6.0
  • There is an exception when jumping to the next or previous match if the keyword isn't found
v2.4.0
  • Add methods to search for given keywords programatically
  • Can find text that belongs to multiple span elements
  • It's possible to add custom styles for highlighted area based on the keyword by using the onHighlightKeyword option
  • The SingleKeyword type supports flags
v2.2.0
  • Can customize the current match by adding CSS properties for the class rpv-search-text-highlight-current
  • It's possible to customize the search control with the new Search component
  • Jumping between search matches doesn't work properly in the horizontal scroll mode
v2.1.0
  • Allow to set multiple keywords to be highlighted initially
  • Clicking Previous match or Next match button throws an error if the keyword is empty
  • Don't perform unhighligting and highlighting many times after texts are rendered
v2.0.0
  • First release