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`?`boolean`Enable shortcuts2.9.0
`keyword`?`string`, `RegExp` or `FlagKeyword`The 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
`onHighlightKeyword``Function`Invoked 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
`Search``ReactElement`Customizable search control2.2.0
See the Create a custom search control example
`ShowSearchPopover``ReactElement`Customizable button to show the search popover2.0.0
See the Customize the button to show the search popover example
`ShowSearchPopoverButton``ReactElement`The default button to show the search popover2.0.0
See the Use the default button to show the search popover example
`clearHighlights``Function`Clear the highlights2.4.0
`highlight``Function`Highlight multiple keywords2.4.0
See the Highlight keywords programmatically example
`jumpToMatch``Function`Jump to a given match2.7.0
`jumpToNextMatch``Function`Jump to the next match2.4.0
`jumpToPreviousMatch``Function`Jump to the previous match2.4.0
`setTargetPages``Function`Set 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
`NextIcon``ReactElement`The icon used to go to the next match in the document2.0.0
`PreviousIcon``ReactElement`The icon used to go to the previous match in the document2.0.0
`SearchIcon``ReactElement`The search icon2.0.0

See also

Changelog

v3.0.0
  • Navigating between search results should be the same as their appearances on pages
v2.11.0
  • Can't use special characters such as `(`, `)`, `[`, `]`, `*` in the keyword
v2.10.1
  • Clicking the Search button scrolls to the top of page
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