Search plugin

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

Install

npm install '@react-pdf-viewer/search';

Usage

  • Import the plugin and styles:
import { searchPlugin } from '@react-pdf-viewer/search';

// Import styles
import '@react-pdf-viewer/search/lib/styles/index.css';
  • Create the plugin instance:
const searchPluginInstance = searchPlugin(props?: SearchPluginProps);

The optional parameter SearchPluginProps represents an object of the property:

?: Optional

PropertyTypeDescriptionFrom
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

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
jumpToNextMatchFunctionJump to the next match2.4.0
jumpToPreviousMatchFunctionJump to the previous match2.4.0
  • Finally, register the search plugin instance:
// Your render function
<Viewer
    fileUrl='...'
    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

Examples