Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

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
`renderHighlights``Function`Customize the highlighted elements. See this example3.5.0
`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.8.0
  • Adjust the pointer when hovering the mouse over checkboxes inside the search popover
  • `RenderSearchProps` adds new `isDocumentLoaded` property that indicates if the document is loaded
  • The search popover should perform search based on the initial keyword passed to the `keyword` option
v3.7.0
  • The search popover always shows up after pressing shortcuts
v3.6.0
  • Can't search or set the initial keyword for scanned documents
v3.5.0
  • Add `renderHighlights` option
  • It can't set the initial keyword when using with the highlight plugin
v3.3.3
  • Clicking `Enter` automatically jumps to the next match when being focused on the keyword field
v3.3.0
  • The hightlights are lost when the whole words option is enabled
v3.2.0
  • It's able to scroll the pages when opening the search popover
  • The search popover is opened if users press the shortcuts (`Ctrl + F`, or `Cmd + F` on macOS) when the mouse is inside the viewer container
v3.1.2
  • Don't highlight spaces between words when searching for a keyword
  • The `clearHighlights` and `clearKeyword()` functions should remove all highlights when the keyword is empty
  • The current highlight is lost after zooming the document
  • The `jumpToMatch()` function does not properly highlight keyword when the page is not in the virtual list
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
Scroll ModeSelection Mode