Resources
Browse every React PDF Kit resource organized by feature. Each section links to the guides, examples, components, hooks, and interfaces you need to build a production-ready React PDF viewer.
Getting Started
Section titled “Getting Started”- Learn what React PDF Kit offers and why to use it
-
Install and set up React PDF Kit in a React or Next.js project
-
Render your first PDF document with the RPConfig and RPProvider components
-
Scaffold a working React PDF viewer in seconds with the starter toolkit
-
Configure Next.js for client-side PDF rendering with React PDF Kit
-
Override the bundled PDF.js dependency with a custom version
- Browse all available React PDF Kit components
- Browse all available React PDF Kit hooks
- Explore TypeScript interfaces and type definitions
Customizable
Section titled “Customizable”Theme & Styling
Section titled “Theme & Styling”-
Adjust CSS variables and styles to match your brand design
-
Wrap the viewer with the RPTheme component to enable theming
-
Set global configuration for the viewer with the RPConfig component
-
Toggle and detect dark mode with the useDarkModeContext hook
- Reference DarkModeProps and theme-related interfaces
Toolbar Customization
Section titled “Toolbar Customization”-
Show, hide, or reorder default toolbar buttons
-
Build your own React PDF toolbar from scratch
-
Build a custom React PDF toolbar using Material UI
-
Use the RPHorizontalBar component to render a horizontal toolbar
-
Use the RPVerticalBar component to render a vertical sidebar
- Add toolbar actions with the RPButton component
-
Display tooltips on toolbar controls with the RPTooltip component
- Reference RPHorizontalBarSlots and toolbar interfaces
Localization
Section titled “Localization”-
Add a custom localization to translate the viewer UI into any language
- Reference the LocalizationMap interface for language files
General
Section titled “General”Layout
Section titled “Layout”-
Use RPLayout for a ready-to-go React PDF viewer layout
-
Use the viewer element directly for full layout control
-
Create a reusable React PDF viewer wrapper component
-
Optimize the React PDF viewer for mobile devices
- Build a custom layout with the RPLayout component
-
Render PDF pages inside any layout with the RPPages component
Document Properties
Section titled “Document Properties”-
Provide PDF document context with the RPProvider component
-
Read document metadata and state with the useDocumentContext hook
- Reference CharacterMap and document-related interfaces
Download
Section titled “Download”Open Local File
Section titled “Open Local File”- Load a PDF document from a remote URL
-
Load a PDF document from a Blob or File object
-
Load a PDF document from an internal file path
-
Handle drag-and-drop file uploads with the useDropFileZoneContext hook
-
Open files programmatically with the useOpenFileContext hook
-
Show a print preview dialog before printing the PDF
-
Print a PDF from a PrimeReact dialog
-
Trigger PDF printing programmatically with the usePrintContext hook
Interactive
Section titled “Interactive”Full Screen
Section titled “Full Screen”Search
Section titled “Search”-
Add a custom search bar to the top toolbar
-
Show search results in the React PDF viewer sidebar
-
Customize the search popover UI and behavior
-
Set an initial keyword to search on viewer load
-
Run searches and read matches with the useSearchContext hook
Selection Mode
Section titled “Selection Mode”-
Add a custom action to a highlighted element
-
Add a custom action to a text selection
-
Highlight text by keywords programmatically
-
Jump to the next highlighted keyword programmatically
-
Highlight regions using bbox coordinates programmatically
-
Jump to the next bbox highlight area programmatically
-
Manage highlights and selection with the useHighlightContext hook
-
Reference HighlightArea, BboxHighlight, and selection interfaces
Navigation
Section titled “Navigation”Page Navigation
Section titled “Page Navigation”-
Navigate between PDF pages with the usePaginationContext hook
-
Detect the currently visible page with the useElementPageContext hook
Rotate
Section titled “Rotate”-
Rotate the entire document with the useRotationContext hook
-
Rotate a single page with the usePageRotateContext hook
-
Zoom in, out, or fit pages with the useZoomContext hook
- Reference ZoomLevel and zoom-related interfaces
Responsive
Section titled “Responsive”View Mode
Section titled “View Mode”-
Switch between scroll, page, and book view modes with the useViewModeContext hook
- Reference ViewMode and ScrollMode enums
Loader
Section titled “Loader”-
Replace the default loader with a custom loading image
-
Show a progress bar instead of a loader image