Search plugin

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


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


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)
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:
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]} />


The search plugin provides other useful properties as following:
import { NextIcon, PreviousIcon, SearchIcon } from '@react-pdf-viewer/search';
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


  • Automatically focus on the keyword input in the search popover
  • Support shortcuts
  • The highlighting elements should be shown below the text, so users can still select the text
  • Be able to set the pages that you want to search in via the setTargetPages function
  • 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
  • There is an exception when jumping to the next or previous match if the keyword isn't found
  • 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
  • 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
  • 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
  • First release