The useSearchContext hook provides access to the search state and functions for a targeted keyword or string.

Text highlight is performed on the searched keyword or string and will navigate to the first occurrence of the searched term.

This is useful when building custom search interfaces or displaying search results from a PDF document.

Note: If you are looking to highlight multiple keywords or strings at the same time, useHighlightContext is recommended.

Return Type

Name	Type	Description
search	string	The current search query string
setSearch	Dispatch<SetStateAction<string>>	Update the search query string. This triggers a new search with the provided query
loading	boolean	Indicate whether the search is in progress
matches	MatchValue[]	An array containing all the search matches found in the document. Each match contains information about its position and content
totalMatches	number	The total number of matches found in the document
currentMatchPosition	number	The index of the currently selected search match (1-based). For example, if there are 5 total matches and the second match is selected, this value would be 2
currentMatch	MatchValue | null	The current match
nextMatch	() => void	Navigate to the next match
prevMatch	() => void	Navigate to the previous match
searchOptions	SearchOptions	The search options
setSearchOptions	Dispatch<SetStateAction<SearchOptions>>	Update the search options
currentMatchElement	HTMLElement | null	The current match element
setCurrentMatchElement	Dispatch<SetStateAction<HTMLElement | null>>	Update the current match element

Usage

To ensure the search context can be accessed, you will need to use useSearchContext inside a component which is a child of RPProvider.

This example shows how to create a CustomSearch component which uses useSearchContext hook to handle the search functionality.

JSX

import { useState, useCallback } from 'react'
import { RPConfig, RPProvider, RPDefaultLayout, RPPages, useSearchContext } from '@pdf-viewer/react'

const CustomSearch = () => {
  const { search, setSearch, currentMatchPosition, totalMatches, nextMatch, prevMatch, loading } = useSearchContext()

  const [searchValue, setSearchValue] = useState(search)

  const handleChange = useCallback((e) => {
    setSearchValue(e.target.value)
  }, [])

  const handleSubmit = useCallback(() => {
    setSearch(searchValue)
  }, [searchValue, setSearch])

  const handleNext = useCallback(() => {
    nextMatch()
  }, [nextMatch])

  const handlePrev = useCallback(() => {
    prevMatch()
  }, [prevMatch])

  return (
    <div>
      <input value={searchValue} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
      <span>
        {currentMatchPosition} / {totalMatches}
      </span>
      <button onClick={handlePrev}>Prev</button>
      <button onClick={handleNext}>Next</button>
      {loading && <div>searching...</div>}
    </div>
  )
}

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey="YOUR_LICENSE_KEY">
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomSearch />
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

import { useState, useCallback, type FC, type ChangeEvent } from 'react'
import { RPConfig, RPProvider, RPDefaultLayout, RPPages, useSearchContext } from '@pdf-viewer/react'

const CustomSearch: FC = () => {
  const { search, setSearch, currentMatchPosition, totalMatches, nextMatch, prevMatch, loading } =useSearchContext()

  const [searchValue, setSearchValue] = useState(search)

  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value)
  }, [])

  const handleSubmit = useCallback(() => {
    setSearch(searchValue)
  }, [searchValue, setSearch])

  const handleNext = useCallback(() => {
    nextMatch()
  }, [nextMatch])

  const handlePrev = useCallback(() => {
    prevMatch()
  }, [prevMatch])

  return (
    <div>
      <input value={searchValue} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
      <span>
        {currentMatchPosition} / {totalMatches}
      </span>
      <button onClick={handlePrev}>Prev</button>
      <button onClick={handleNext}>Next</button>
      {loading && <div>searching...</div>}
    </div>
  )
}

export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey="YOUR_LICENSE_KEY">
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomSearch />
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}