Interfaces
The interfaces and enumerators described here are used across different components and hooks to ensure consistent data structures and type checking.
Below you’ll find detailed documentation for each interface and enumeration, including relationships to other parts of React PDF.
DarkModeProps
The DarkModeProps interface represents the properties of the dark mode.
This is configured via the themeSwitcher prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| darkMode | boolean | Whether the dark mode is active |
| setDarkMode | React.Dispatch<React.SetStateAction<boolean>> | A function to set the dark mode |
DownloadToolProps
The DownloadToolProps interface represents the properties of the download tool.
This is configured via the downloadTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| download | () => void | A function to download the PDF file |
CharacterMap
The CharacterMap interface represents the character map object of (CMap) to be used for text rendering.
This is configured via the characterMap prop of the RPProvider component:
| Name | Type | Description |
|---|---|---|
| isCompressed | boolean | Specify if the Adobe CMaps are binary packed. The default value is true |
| url | string | The URL or relative path where the predefined Adobe CMaps are located. It must have / at the end |
FullScreenToolProps
The FullScreenToolProps interface represents the properties of the full screen tool.
This is configured via the fullscreenTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| isFullScreen | boolean | Whether the viewer is in fullscreen mode |
| toggleFullScreen | () => void | A function to toggle the fullscreen mode |
| isSupported | boolean | Whether the fullscreen mode is supported |
Localization
Currently, React PDF Viewer component comes with built-in translations of 5 languages, namely: The default localizations provided are:
en_US(English - United States)it_IT(Italian - Italy)pt_PT(Portuguese - Portugal)th_TH(Thai - Thailand)zh_CN(Chinese - China)
To change the translations, React PDF Viewer provides localization keys for easy customization. Each key corresponds to a specific text that will be displayed in the component for each locale.
Here are the keys you can localize:
| Key | Type | Description |
|---|---|---|
| currentPageTooltip | string | Tooltip text of the current page |
| documentPropertiesLabel | string | Label of the document properties option in More Options and the title of document properties modal |
| documentPropertiesTooltip | string | Tooltip text of the document properties option |
| downloadFileLabel | string | Label of the download icon |
| downloadFileTooltip | string | Tooltip text of the download icon |
| dragDropFileMessage | string | Message of the drag & drop mask when a file is dragged over the component |
| dualPageLabel | string | Label of the dual page panel in More Options |
| dualPageTooltip | string | Tooltip text of the dual page option |
| firstPageTooltip | string | Tooltip text of the first page option |
| fullScreenLabel | string | Label of the full screen option in More Options on mobile responsive |
| fullScreenTooltip | string | Tooltip text of the full screen button and the full screen option |
| handToolLabel | string | Label of the hand tool option in More options |
| handToolTooltip | string | Tooltip text of the hand tool option |
| horizontalScrollingLabel | string | Label of the horizontal scrolling option in More Options |
| horizontalScrollingTooltip | string | Tooltip text of the horizontal scrolling option |
| lastPageLabel | string | Label of the last page option in More Options |
| lastPageTooltip | string | Tooltip text of the last page option |
| moreOptionTooltip | string | Tooltip text of the More Options button |
| nextPageTooltip | string | Tooltip text of the next page button |
| openLocalFileLabel | string | Label of open local file option within More Options on mobile responsive |
| openLocalFileTooltip | string | Tooltip text of the open local file button and open local file option |
| pageScrollingLabel | string | Label of the page scrolling option in More Options |
| pageScrollingTooltip | string | Tooltip text of the page scrolling option |
| previousPageTooltip | string | Tooltip text of the previous page button |
| printCancelLabel | string | Label of the button to cancel printing process |
| printLabel | string | Label of print option in More Options on mobile responsive |
| printLoadingMessage | string | Loading message on the progress modal while preparing printing |
| printTooltip | string | Tooltip text of the print button and the print option |
| propertiesAuthorLabel | string | Label of the author in document properties modal |
| propertiesCreateOnLabel | string | Label of the created date in document properties modal |
| propertiesCreatorLabel | string | Label of the creator in document properties modal |
| propertiesFilenameLabel | string | Label of the filename in document properties modal |
| propertiesFileSizeLabel | string | Label of the file size in document properties modal |
| propertiesKeywordLabel | string | Label of the keyword in document properties modal |
| propertiesModifiedOnLabel | string | Label of the modified date in document properties modal |
| propertiesPageCountLabel | string | Label of the page count in document properties modal |
| propertiesPDFProducerLabel | string | Label of the PDF producer in document properties modal |
| propertiesPDFVersionLabel | string | Label of the PDF version in document properties modal |
| propertiesSubjectLabel | string | Label of the subject in document properties modal |
| propertiesTitleLabel | string | Label of the title in document properties modal |
| rotateClockwiseLabel | string | Label of the rotate clockwise option in More Options |
| rotateClockwiseTooltip | string | Tooltip text of the rotate clockwise option |
| rotateCounterclockwiseLabel | string | Label of the rotate counterclockwise option in More Options |
| rotateCounterclockwiseTooltip | string | Tooltip text of the rotate counterclockwise option |
| searchButtonTooltip | string | Tooltip text of the search button |
| searchCloseButtonTooltip | string | Tooltip text of the close icon for the search popover |
| searchInputPlaceholder | string | Placeholder of the search input |
| searchInputTooltip | string | Tooltip text of the search input |
| searchNextTooltip | string | Tooltip text of the next search match icon |
| searchMatchCaseLabel | string | Label of the search match case option |
| searchMatchCaseTooltip | string | Tooltip text of the search match case option |
| searchPrevTooltip | string | Tooltip text of the previous search match icon |
| searchWholeWordsLabel | string | Label of the search whole words option |
| searchWholeWordsTooltip | string | Tooltip text of the search whole words option |
| singlePageLabel | string | Label of the single page panel option in More Options |
| singlePageTooltip | string | Tooltip text of the single page option |
| textSelectionLabel | string | Label of the text selection option in More Options |
| textSelectionTooltip | string | Tooltip text of the text selection option |
| themeEnableDarkTooltip | string | Tooltip text of the button to enable dark theme |
| themeEnableLightTooltip | string | Tooltip text of the button to enable light theme |
| thumbnailTooltip | string | Tooltip text of the thumbnail button |
| verticalScrollingLabel | string | Label of the vertical scrolling option in More Options |
| verticalScrollingTooltip | string | Tooltip text of the vertical scrolling option |
| zoomActualSize | string | Label of the actual zoom option of the zoom menu select |
| zoomInTooltip | string | Tooltip text of the zoom in button |
| zoomOutTooltip | string | Tooltip text of the zoom out button |
| zoomPageFit | string | Label of the page fit zoom option of the zoom menu select |
| zoomPageWidth | string | Label of the page width zoom option of the zoom menu select |
| zoomSelectTooltip | string | Tooltip text of the selector between zoom buttons |
If you would like to add a custom language instead, follow here for our Adding a Custom Localization tutorial
Remark: If you would like to request another built-in language, please submit a request on GitHub.
MatchValue
The MatchValue interface represents the value of the search match.
| Name | Type | Description |
|---|---|---|
| page | number | The page number of the match |
| pageMatchIdx | number | The index of the match in the page |
OpenFileToolProps
The OpenFileToolProps interface represents the properties of the open file tool.
This is configured via the openFileTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| openFile | () => void | A function to open the local file to change the PDF file |
PageNavigationToolProps
The PageNavigationToolProps interface represents the properties of the page navigation tool.
This is configured via the pageNavigationTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| total | number | The total number of pages in a PDF file |
| current | number | The current page number |
| nextPage | () => void | A function to navigate to the next page |
| prevPage | () => void | A function to navigate to the previous page |
| changePage | (page: number) => void | A function to change to a specific page number |
| goToPage | (page: number) => SetPageResult | A function to navigate to a specific page with result information |
PdfPage
The PdfPage interface represents a page of React PDF.
| Name | Type | Description |
|---|---|---|
| page | PDFPageProxy | The PDF page object |
| thumbnailViewport | PageViewport | The thumbnail viewport of the page |
| thumbnailScale | number | The thumbnail scale of the page |
PdfProperties
The PdfProperties interface represents metadata and properties of a PDF document.
These properties can be accessed from the onLoaded event of the RPProvider component and the useDocumentContext hook:
| Name | Type | Description |
|---|---|---|
| author | string | The author of the PDF document |
| createdOn | string | The creation date of the PDF document |
| creator | string | The creator of the PDF document |
| filename | string | The name of the PDF file |
| fileSize | string | The size of the PDF file |
| keywords | string | Keywords associated with the PDF document |
| modifiedOn | string | The most recent modified date of the PDF document |
| pageCount | number | undefined | The total number of pages in the PDF document |
| pdfProducer | string | The software used to produce the PDF |
| pdfVersion | string | The version of the PDF specification used |
| subject | string | The subject of the PDF document |
| title | string | The title of the PDF document |
PreparePrintProgress
The PreparePrintProgress interface represents the progress of the print process.
This is used in the setOnProgress callback and the progress prop of the PrintToolProps interface:
| Name | Type | Description |
|---|---|---|
| loadedPages | number | The number of pages loaded for print |
| totalPages | number | The total number of pages in the PDF document |
| percentage | number | The progress of the print process |
PrintToolProps
The PrintToolProps interface represents the properties of the print tool.
This is configured via the printTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| printPdf | () => void | A function to print the PDF document |
| cancel | () => void | A function to cancel the preparing print process |
| setOnProgress | (callback: (progress: PreparePrintProgress) => void) => void | A function to set the print progress callback |
| setOnComplete | (callback: () => void) => void | A function to set the print complete callback |
| setOnError | (callback: (error: Error) => void) => void | A function to set the print error callback |
| progress | PreparePrintProgress | The progress object of the print process |
SearchOptions
The SearchOptions interface represents the options for searching text in React PDF.
This is configured via the searchOptions prop of the useSearchContext hook:
| Name | Type | Description |
|---|---|---|
| matchCase | boolean | Whether the search should be case-sensitive |
| wholeWords | boolean | Whether the search should be for whole words only |
SetPageResult
The SetPageResult interface represents the result of setting a page in the viewer.
| Name | Type | Description |
|---|---|---|
| success | boolean | Whether the page was set successfully |
| currentPage | number | The current page number |
ScrollMode
The ScrollMode enumeration is used to define how pages will be scrolled in the viewer. This is configured via the initialScrollMode prop:
ScrollMode.HORIZONTAL_SCROLLING: Pages are scrolled horizontally. This mode is compatible withViewMode.SINGLE_PAGEonly.ScrollMode.PAGE_SCROLLING: Displays one page at a time, enabling users to scroll through individual pages.ScrollMode.VERTICAL_SCROLLING: Pages are scrolled vertically, displaying multiple pages stacked on top of each other.
ThumbnailToolProps
The ThumbnailToolProps interface represents the properties of the thumbnail tool.
This is configured via the thumbnailTool prop of the RPSlot component:
| Name | Type | Description |
|---|---|---|
| onClick | () => void | A function to handle the thumbnail click event |
| active | boolean | Whether the thumbnail is active |
ZoomLevel
The ZoomLevel enumeration defines how pages will be scaled in the viewer. This is configured via the initialScale prop:
ZoomLevel.ACTUAL: Pages are rendered at their actual PDF size.ZoomLevel.PAGE_FIT: Pages are scaled to fit within the viewer’s width and height.ZoomLevel.PAGE_WIDTH: Pages are scaled to fit the viewer’s width.