Example: Create a custom search control

You can customize the search control in the Search plugin with the Search component:

import { RenderSearchProps, Search } from '@react-pdf-viewer/search';

    (renderSearchProps: RenderSearchProps) => (
        // Your custom search control

The parameter renderSearchProps provides the properties and methods to build up a custom search control:

clearKeywordFunctionClear the keyword
changeMatchCaseFunctionThe result has to match case with the keyword
changeWholeWordsFunctionThe result has to match the whole keyword
currentMatchnumberThe index of current match
jumpToNextMatchFunctionJump to the next match
jumpToPreviousMatchFunctionJump to the previous match
keywordstringThe current keyword
matchCasebooleantrue if the result matches case with the keyword
wholeWordsbooleantrue if the result matches the whole keyword
searchFunctionPerform the search with current keyword and matchCase, wholeWords conditions
setKeywordFunctionSet the current keyword

(The sample code)

Related examples