├── .gitignore ├── assets └── screenshot.png ├── prettier.config.js ├── display-reading-progress-at-the-top ├── StoreProps.ts ├── README.md ├── readingIndicatorPlugin.tsx ├── ReadingProgressExample.tsx └── ReadingIndicator.tsx ├── open-a-confirmation-modal-when-users-click-a-link ├── StoreProps.ts ├── OpenConfirmationModalExample.tsx ├── openLinksPlugin.tsx └── ConfirmationModal.tsx ├── slide-presentation ├── README.md └── disableScrollPlugin.tsx ├── highlight-keywords-programmatically ├── screenshot.png └── README.md ├── add-custom-styles-to-the-highlighted-elements ├── screenshot.png ├── README.md └── CustomHighlightedElementExample.tsx ├── keep-scroll-position-after-changing-the-document ├── StoreProps.ts ├── isDocumentChangedPlugin.tsx ├── KeepScrollOffsetExample.tsx ├── trackPositionPlugin.tsx └── PositionTracker.tsx ├── zoom-to-a-specific-level-programmatically ├── StoreProps.tsx └── customZoomPlugin.tsx ├── hide-unnecessary-elements-when-printing-a-document └── modalExample.css ├── zoom-after-full-screen ├── StoreProps.ts ├── zoomAfterFullScreen.tsx ├── ZoomAfterFullScreenExample.tsx └── Tracker.tsx ├── README.md ├── use-multiple-viewers-in-the-same-page ├── MultipleViewersSamePageExample.tsx └── ViewerWrapper.tsx ├── drop └── DropExample.tsx ├── disable-scroll └── DisableScrollExample.tsx ├── initial-page └── InitialPageExample.tsx ├── customize-thumbnail-spinners ├── square-spinner.css └── CustomThumbnailSpinnerExample.tsx ├── keep-scale-level-after-changing-the-document ├── trackScalePlugin.tsx └── KeepScaleLevelExample.tsx ├── set-the-initial-tab-in-the-default-layout ├── SetInitialTabExample.tsx └── SetInitialTabPageModeExample.tsx ├── submit-the-password-programmatically └── SubmitPasswordExample.tsx ├── theme ├── DarkThemeExample.tsx ├── AutoSwitchThemeExample.tsx └── SwitchThemeButtonExample.tsx ├── customize-loader-renderer └── RenderLoaderExample.tsx ├── default-layout ├── DefaultLayoutExample.tsx ├── OpenSidebarTabExample.tsx ├── RenderToolbarExample.tsx └── ToolbarSlotsExample.tsx ├── find-and-replace-links-found-in-each-page ├── FindLinksExample.tsx └── findLinksPlugin.ts ├── singe-page-view └── SinglePageViewExample.tsx ├── display-the-thumbnail-of-a-given-page ├── pageThumbnailPlugin.tsx └── DisplayThumbnailExample.tsx ├── remove-all-tabs-from-the-sidebar └── RemoveAllTabsExample.tsx ├── search-sidebar-with-initial-keyword ├── SearchSidebar.tsx └── SearchSidebarInitialKeywordExample.tsx ├── disable-text-selection └── DisableTextSelectionExample.tsx ├── set-the-page-from-last-visit-as-the-initial-page └── StoreCurrentPageExample.tsx ├── character-map └── CharacterMapExample.tsx ├── customize-the-width-of-thumbnails ├── CustomWidthDefaultLayoutExample.tsx └── CustomWidthExample.tsx ├── jump-to-given-page ├── jumpToPagePlugin.tsx └── JumpToGivenPageExample.tsx ├── localization └── LocalizationExample.tsx ├── add-margin-between-pages └── AddMarginExample.tsx ├── remove-a-tab-from-the-sidebar └── RemoveTabExample.tsx ├── change-the-order-of-tabs-in-the-sidebar └── ChangeTabsOrderExample.tsx ├── events └── EventsExample.tsx ├── set-the-target-pages-when-printing-a-document ├── SetPagesDefaultLayoutExample.tsx └── SetPagesExample.tsx ├── use-a-rtl-language └── RtlExample.tsx ├── use-the-last-chosen-theme └── UseLastThemeExample.tsx ├── replace-the-canvas-with-svg-layer └── SvgLayerExample.tsx ├── include-the-default-sidebar-in-the-full-screen-mode └── IncludeSidebarFullScreenModeDefaultLayoutExample.tsx ├── include-the-default-toolbar-in-the-full-screen-mode ├── IncludeToolbarFullScreenModeDefaultLayoutExample.tsx └── IncludeToolbarFullScreenModeExample.tsx ├── zoom-to-fit-the-screen-after-entering-the-full-screen-mode └── ZoomToFitScreenInFullScreenModeExample.tsx ├── add-a-new-tab-to-the-sidebar └── AddNewTabExample.tsx ├── bookmark └── BookmarkExample.tsx ├── thumbnail └── ThumbnailExample.tsx ├── attachment └── AttachmentExample.tsx ├── jump-to-the-first-match-of-pre-defined-keywords-automatically └── JumpToFirstMatchExample.tsx ├── show-search-results-in-a-sidebar └── SearchSidebarExample.tsx ├── customize-the-button-to-exit-the-full-screen-mode └── CustomExitFullScreenButtonExample.tsx ├── customize-the-zoom-levels ├── CustomizeZoomLevelsDefaultLayoutExample.tsx └── CustomizeZoomLevelsExample.tsx ├── set-a-bookmark-expanded-or-collapsed-initially └── SetBookmarkExpandedExample.tsx ├── switch-to-a-scroll-mode └── SwitchScrollModeInFullScreenModeExample.tsx ├── get-file ├── DownloadButtonExample.tsx ├── CustomizeFileNameExample.tsx └── CustomizeDownloadButtonExample.tsx ├── open ├── OpenButtonExample.tsx └── CustomizeOpenButtonExample.tsx ├── draw-on-top-of-the-canvas-layer └── DrawCanvasExample.tsx ├── remove-some-parts-from-the-default-toolbar ├── RemovePartsDefaultToolbarDefaultLayoutExample.tsx └── RemovePartsDefaultToolbarExample.tsx ├── print ├── PrintButtonExample.tsx └── CustomizePrintButtonExample.tsx ├── toolbar ├── DefaultToolbarExample.tsx └── ToolbarOptionsExample.tsx ├── add-a-watermark └── WaterMarkExample.tsx ├── customize-link-annotation └── CustomLinkAnnotationExample.tsx ├── full-screen ├── FullScreenButtonExample.tsx └── CustomizeFullScreenButtonExample.tsx ├── package.json ├── search ├── ShowSearchPopoverButtonExample.tsx ├── HighlightMultipleKeywordsExample.tsx └── CustomizeSearchPopoverButtonExample.tsx ├── preview-a-pdf-file-before-uploading └── PreviewLocalFile.tsx ├── properties ├── ShowPropertiesButtonExample.tsx └── CustomizePropertiesButtonExample.tsx ├── show-custom-page-labels-for-thumbnails └── CustomLabelExample.tsx ├── rotate ├── RotateButtonsExample.tsx └── CustomizeRotateButtonsExample.tsx ├── customize-error-renderer └── RenderErrorExample.tsx ├── render-the-highlight-areas └── RenderHighlightAreasExample.tsx ├── page-navigation ├── CurrentPageExample.tsx └── PageNavigationButtonsExample.tsx ├── highlight └── RenderHighlightTargetExample.tsx ├── print-the-current-document-programmatically └── PrintDocumentExample.tsx ├── zoom └── ZoomButtonsExample.tsx ├── customize-bookmark-items ├── CustomizeToggleIconsDefaultLayoutExample.tsx └── CustomizeToggleIconsExample.tsx ├── selection-mode └── SwitchSelectionModeButtonsExample.tsx ├── preview-a-pdf-file-from-base-64 └── LoadFromBase64Example.tsx ├── customize-the-default-toolbar └── CustomizeDefaultToolbarExample.tsx ├── show-the-custom-page-label-for-the-current-page └── CurrentPageLabelExample.tsx ├── execute-a-function-when-users-click-a-bookmark-item └── ClickBookmarkItemExample.tsx ├── customize-the-protected-view └── CustomizeProtectedViewExample.tsx ├── use-a-different-language ├── LocalizationExample.tsx ├── vi_VN.json └── en_US.json ├── use-the-rotate-page-component-to-rotate-a-particular-page ├── RotatePageExample.tsx └── RotatePageWithThumbnailsExample.tsx ├── customize-the-progress-bar-when-preparing-pages-to-print ├── CustomizeProgressBarDefaultLayoutExample.tsx └── CustomizeProgressBarExample.tsx ├── add-buttons-to-each-page-for-rotating-the-target-page └── RotateSinglePageExample.tsx ├── preview-a-document-inside-a-modal └── ModalExample.tsx ├── scroll-mode └── SwitchScrollModeButtonsExample.tsx ├── magazine └── MagazineExample.tsx └── locale-switcher └── vi_VN.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-pdf-viewer/examples/HEAD/assets/screenshot.png -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, 3 | singleQuote: true, 4 | tabWidth: 4, 5 | }; 6 | -------------------------------------------------------------------------------- /display-reading-progress-at-the-top/StoreProps.ts: -------------------------------------------------------------------------------- 1 | export default interface StoreProps { 2 | getPagesContainer?(): HTMLElement; 3 | } 4 | -------------------------------------------------------------------------------- /open-a-confirmation-modal-when-users-click-a-link/StoreProps.ts: -------------------------------------------------------------------------------- 1 | export default interface StoreProps { 2 | clickedTarget?: string; 3 | } 4 | -------------------------------------------------------------------------------- /slide-presentation/README.md: -------------------------------------------------------------------------------- 1 | ## Example: Slide presentation 2 | 3 | [Live demo](https://react-pdf-viewer.dev/examples/slide-presentation) 4 | -------------------------------------------------------------------------------- /highlight-keywords-programmatically/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-pdf-viewer/examples/HEAD/highlight-keywords-programmatically/screenshot.png -------------------------------------------------------------------------------- /add-custom-styles-to-the-highlighted-elements/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-pdf-viewer/examples/HEAD/add-custom-styles-to-the-highlighted-elements/screenshot.png -------------------------------------------------------------------------------- /display-reading-progress-at-the-top/README.md: -------------------------------------------------------------------------------- 1 | ## Example: Display reading progress at the top 2 | 3 | [Live demo](https://react-pdf-viewer.dev/examples/display-reading-progress-at-the-top) 4 | -------------------------------------------------------------------------------- /keep-scroll-position-after-changing-the-document/StoreProps.ts: -------------------------------------------------------------------------------- 1 | import { Offset } from '@react-pdf-viewer/core'; 2 | 3 | export interface StoreProps { 4 | getPagesContainer?(): HTMLElement; 5 | offset?: Offset; 6 | } 7 | -------------------------------------------------------------------------------- /zoom-to-a-specific-level-programmatically/StoreProps.tsx: -------------------------------------------------------------------------------- 1 | import { SpecialZoomLevel } from '@react-pdf-viewer/core'; 2 | 3 | export default interface StoreProps { 4 | zoom?(scale: number | SpecialZoomLevel): void; 5 | } 6 | -------------------------------------------------------------------------------- /hide-unnecessary-elements-when-printing-a-document/modalExample.css: -------------------------------------------------------------------------------- 1 | @media print { 2 | .rpv-print__body-printing .example-modal { 3 | display: none; 4 | } 5 | } 6 | 7 | .example-modal { 8 | display: flex; 9 | } 10 | -------------------------------------------------------------------------------- /zoom-after-full-screen/StoreProps.ts: -------------------------------------------------------------------------------- 1 | import { SpecialZoomLevel } from '@react-pdf-viewer/core'; 2 | 3 | export default interface StoreProps { 4 | getPagesContainer?(): HTMLElement; 5 | zoom?(scale: number | SpecialZoomLevel): void; 6 | } 7 | -------------------------------------------------------------------------------- /highlight-keywords-programmatically/README.md: -------------------------------------------------------------------------------- 1 | ## Example: Highlight keywords programmatically 2 | 3 | [Live demo](https://react-pdf-viewer.dev/examples/highlight-keywords-programmatically) 4 | 5 | ![Highlight keywords programmatically](screenshot.png) 6 | -------------------------------------------------------------------------------- /add-custom-styles-to-the-highlighted-elements/README.md: -------------------------------------------------------------------------------- 1 | ## Example: Add custom styles to the highlighted elements 2 | 3 | [Live demo](https://react-pdf-viewer.dev/examples/add-custom-styles-to-the-highlighted-elements) 4 | 5 | ![Add custom styles to the highlighted elements](screenshot.png) 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React PDF Viewer examples 2 | 3 | This repository contains the sources of all React PDF Viewer [examples](https://react-pdf-viewer.dev/examples). 4 | 5 | ![React PDF viewer](https://raw.githubusercontent.com/react-pdf-viewer/examples/main/assets/screenshot.png) 6 | 7 | These examples work with 8 | 9 | * `@react-pdf-viewer` 3.11.0 10 | * `pdfjs-dist` 3.2.146 -------------------------------------------------------------------------------- /use-multiple-viewers-in-the-same-page/MultipleViewersSamePageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import ViewerWrapper from './ViewerWrapper'; 3 | 4 | const MultipleViewersSamePageExample = () => { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default MultipleViewersSamePageExample; 14 | -------------------------------------------------------------------------------- /drop/DropExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { dropPlugin } from '@react-pdf-viewer/drop'; 3 | import { Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/drop/lib/styles/index.css'; 7 | 8 | interface DropExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const DropExample: React.FC = ({ fileUrl }) => { 13 | const dropPluginInstance = dropPlugin(); 14 | 15 | return ; 16 | }; 17 | 18 | export default DropExample; 19 | -------------------------------------------------------------------------------- /disable-scroll/DisableScrollExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SpecialZoomLevel, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface DisableScrollExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const DisableScrollExample: React.FC = ({ fileUrl }) => { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | }; 17 | 18 | export default DisableScrollExample; 19 | -------------------------------------------------------------------------------- /initial-page/InitialPageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface InitialPageExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const InitialPageExample: React.FC = ({ fileUrl }) => ( 11 |
17 | 18 |
19 | ); 20 | 21 | export default InitialPageExample; 22 | -------------------------------------------------------------------------------- /open-a-confirmation-modal-when-users-click-a-link/OpenConfirmationModalExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import openLinksPlugin from './openLinksPlugin'; 5 | 6 | interface OpenConfirmationModalExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const OpenConfirmationModalExample: React.FC = ({ fileUrl }) => { 11 | const openLinksPluginInstance = openLinksPlugin(); 12 | 13 | return ; 14 | }; 15 | 16 | export default OpenConfirmationModalExample; 17 | -------------------------------------------------------------------------------- /customize-thumbnail-spinners/square-spinner.css: -------------------------------------------------------------------------------- 1 | @keyframes square-spinner { 2 | 25% { 3 | transform: rotateX(180deg) rotateY(0); 4 | } 5 | 50% { 6 | transform: rotateX(180deg) rotateY(180deg); 7 | } 8 | 75% { 9 | transform: rotateX(0) rotateY(180deg); 10 | } 11 | 100% { 12 | transform: rotateX(0) rotateY(0); 13 | } 14 | } 15 | 16 | .square-spinner { 17 | background-color: rgba(0, 0, 0, 0.2); 18 | width: 2rem; 19 | height: 2rem; 20 | animation-duration: 3s; 21 | animation-iteration-count: infinite; 22 | animation-name: square-spinner; 23 | } 24 | -------------------------------------------------------------------------------- /keep-scale-level-after-changing-the-document/trackScalePlugin.tsx: -------------------------------------------------------------------------------- 1 | import type { Plugin, ViewerState } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | interface TrackScalePlugin extends Plugin { 5 | scale?: number; 6 | } 7 | 8 | export const trackScalePlugin = ({ initialScale }: { initialScale?: number }): TrackScalePlugin => { 9 | const [scale, setScale] = React.useState(initialScale); 10 | 11 | return { 12 | onViewerStateChange: (viewerState: ViewerState) => { 13 | setScale(viewerState.scale); 14 | return viewerState; 15 | }, 16 | scale, 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /set-the-initial-tab-in-the-default-layout/SetInitialTabExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 3 | import * as React from 'react'; 4 | 5 | interface SetInitialTabExampleProps { 6 | fileUrl: string; 7 | } 8 | 9 | const SetInitialTabExample: React.FC = ({ fileUrl }) => { 10 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 11 | setInitialTab: () => Promise.resolve(0), 12 | }); 13 | 14 | return ; 15 | }; 16 | 17 | export default SetInitialTabExample; 18 | -------------------------------------------------------------------------------- /submit-the-password-programmatically/SubmitPasswordExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import type { DocumentAskPasswordEvent } from '@react-pdf-viewer/core'; 4 | 5 | interface SubmitPasswordExampleProps { 6 | fileUrl: string; 7 | } 8 | 9 | const SubmitPasswordExample: React.FC = ({ fileUrl }) => { 10 | const handleAskPassword = (e: DocumentAskPasswordEvent) => { 11 | e.verifyPassword('The password goes here'); 12 | }; 13 | 14 | return ; 15 | }; 16 | 17 | export default SubmitPasswordExample; 18 | -------------------------------------------------------------------------------- /theme/DarkThemeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface DarkThemeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const DarkThemeExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | return ; 16 | }; 17 | 18 | export default DarkThemeExample; 19 | -------------------------------------------------------------------------------- /use-multiple-viewers-in-the-same-page/ViewerWrapper.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface ViewerWrapperProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ViewerWrapper: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | return ; 16 | }; 17 | 18 | export default ViewerWrapper; 19 | -------------------------------------------------------------------------------- /customize-loader-renderer/RenderLoaderExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ProgressBar, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface RenderLoaderExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const RenderLoaderExample: React.FC = ({ fileUrl }) => { 11 | const renderLoader = (percentages: number) => ( 12 |
13 | 14 |
15 | ); 16 | 17 | return ; 18 | }; 19 | 20 | export default RenderLoaderExample; 21 | -------------------------------------------------------------------------------- /default-layout/DefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface DefaultLayoutExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const DefaultLayoutExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | return ; 16 | }; 17 | 18 | export default DefaultLayoutExample; 19 | -------------------------------------------------------------------------------- /slide-presentation/disableScrollPlugin.tsx: -------------------------------------------------------------------------------- 1 | import { Plugin, RenderViewer } from '@react-pdf-viewer/core'; 2 | 3 | const disableScrollPlugin = (): Plugin => { 4 | const renderViewer = (props: RenderViewer) => { 5 | const { slot } = props; 6 | 7 | if (slot.subSlot && slot.subSlot.attrs && slot.subSlot.attrs.style) { 8 | slot.subSlot.attrs.style = Object.assign({}, slot.subSlot.attrs.style, { 9 | // Disable scrolling in the pages container 10 | overflow: 'hidden', 11 | }); 12 | } 13 | 14 | return slot; 15 | }; 16 | 17 | return { 18 | renderViewer, 19 | }; 20 | }; 21 | 22 | export default disableScrollPlugin; 23 | -------------------------------------------------------------------------------- /theme/AutoSwitchThemeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface AutoSwitchThemeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const AutoSwitchThemeExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | return ; 16 | }; 17 | 18 | export default AutoSwitchThemeExample; 19 | -------------------------------------------------------------------------------- /find-and-replace-links-found-in-each-page/FindLinksExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import findLinksPlugin from './findLinksPlugin'; 4 | 5 | interface FindLinksExampleProps { 6 | fileUrl: string; 7 | } 8 | 9 | const FindLinksExample: React.FC = ({ fileUrl }) => { 10 | // Create new plugin 11 | const findLinksPluginInstance = findLinksPlugin(); 12 | 13 | return ( 14 | 21 | ); 22 | }; 23 | 24 | export default FindLinksExample; 25 | -------------------------------------------------------------------------------- /set-the-initial-tab-in-the-default-layout/SetInitialTabPageModeExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin, setInitialTabFromPageMode } from '@react-pdf-viewer/default-layout'; 3 | import * as React from 'react'; 4 | 5 | interface SetInitialTabPageModeExampleProps { 6 | fileUrl: string; 7 | } 8 | 9 | const SetInitialTabPageModeExample: React.FC = ({ fileUrl }) => { 10 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 11 | setInitialTab: setInitialTabFromPageMode, 12 | }); 13 | 14 | return ; 15 | }; 16 | 17 | export default SetInitialTabPageModeExample; 18 | -------------------------------------------------------------------------------- /singe-page-view/SinglePageViewExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SpecialZoomLevel, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface SinglePageViewExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const SinglePageViewExample: React.FC = ({ fileUrl }) => { 11 | return ( 12 |
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default SinglePageViewExample; 24 | -------------------------------------------------------------------------------- /display-the-thumbnail-of-a-given-page/pageThumbnailPlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { Plugin, RenderViewer } from '@react-pdf-viewer/core'; 3 | 4 | export interface PageThumbnailPluginProps { 5 | PageThumbnail: React.ReactElement; 6 | } 7 | 8 | export const pageThumbnailPlugin = (props: PageThumbnailPluginProps): Plugin => { 9 | const { PageThumbnail } = props; 10 | 11 | return { 12 | renderViewer: (renderProps: RenderViewer) => { 13 | let { slot } = renderProps; 14 | 15 | slot.children = PageThumbnail; 16 | 17 | // Reset the sub slot 18 | slot.subSlot.attrs = {}; 19 | slot.subSlot.children = <>; 20 | 21 | return slot; 22 | }, 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /remove-all-tabs-from-the-sidebar/RemoveAllTabsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface RemoveAllTabsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const RemoveAllTabsExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | sidebarTabs: (defaultTabs) => [], 15 | }); 16 | 17 | return ; 18 | }; 19 | 20 | export default RemoveAllTabsExample; 21 | -------------------------------------------------------------------------------- /search-sidebar-with-initial-keyword/SearchSidebar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RenderSearchProps, SearchPlugin } from '@react-pdf-viewer/search'; 3 | import { SearchSidebarInner } from './SearchSidebarInner'; 4 | 5 | interface SearchSidebarProps { 6 | isDocumentLoaded: boolean; 7 | searchPluginInstance: SearchPlugin; 8 | } 9 | 10 | export const SearchSidebar: React.FC = ({ isDocumentLoaded, searchPluginInstance }) => { 11 | const { Search } = searchPluginInstance; 12 | 13 | return ( 14 | 15 | {(renderSearchProps: RenderSearchProps) => ( 16 | 17 | )} 18 | 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /disable-text-selection/DisableTextSelectionExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer, RenderPageProps } from '@react-pdf-viewer/core'; 3 | 4 | interface DisableTextSelectionExampleProps { 5 | fileUrl: string; 6 | } 7 | 8 | const DisableTextSelectionExample: React.FC = ({ fileUrl }) => { 9 | const renderPage = (props: RenderPageProps) => { 10 | return ( 11 | <> 12 | {props.canvasLayer.children} 13 |
{props.textLayer.children}
14 | {props.annotationLayer.children} 15 | 16 | ); 17 | }; 18 | 19 | return ; 20 | }; 21 | 22 | export default DisableTextSelectionExample; 23 | -------------------------------------------------------------------------------- /set-the-page-from-last-visit-as-the-initial-page/StoreCurrentPageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PageChangeEvent, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface StoreCurrentPageExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const StoreCurrentPageExample: React.FC = ({ fileUrl }) => { 11 | const handlePageChange = (e: PageChangeEvent) => { 12 | localStorage.setItem('current-page', `${e.currentPage}`); 13 | }; 14 | 15 | const initialPage = localStorage.getItem('current-page') ? parseInt(localStorage.getItem('current-page'), 10) : 0; 16 | 17 | return ; 18 | }; 19 | 20 | export default StoreCurrentPageExample; 21 | -------------------------------------------------------------------------------- /character-map/CharacterMapExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CharacterMap, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface CharacterMapExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const CharacterMapExample: React.FC = ({ fileUrl }) => { 11 | const characterMap: CharacterMap = { 12 | isCompressed: true, 13 | url: 'https://unpkg.com/pdfjs-dist@2.5.207/cmaps/', 14 | }; 15 | 16 | return ( 17 |
23 | 24 |
25 | ); 26 | }; 27 | 28 | export default CharacterMapExample; 29 | -------------------------------------------------------------------------------- /customize-the-width-of-thumbnails/CustomWidthDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface CustomWidthDefaultLayoutExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomWidthDefaultLayoutExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | thumbnailPlugin: { 15 | thumbnailWidth: 150, 16 | }, 17 | }); 18 | 19 | return ; 20 | }; 21 | 22 | export default CustomWidthDefaultLayoutExample; 23 | -------------------------------------------------------------------------------- /jump-to-given-page/jumpToPagePlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createStore, Plugin, PluginFunctions } from '@react-pdf-viewer/core'; 3 | 4 | interface StoreProps { 5 | jumpToPage?(pageIndex: number): void; 6 | } 7 | 8 | interface JumpToPagePlugin extends Plugin { 9 | jumpToPage(pageIndex: number): void; 10 | } 11 | 12 | const jumpToPagePlugin = (): JumpToPagePlugin => { 13 | const store = React.useMemo(() => createStore(), []); 14 | 15 | return { 16 | install: (pluginFunctions: PluginFunctions) => { 17 | store.update('jumpToPage', pluginFunctions.jumpToPage); 18 | }, 19 | jumpToPage: (pageIndex: number) => { 20 | const fn = store.get('jumpToPage'); 21 | if (fn) { 22 | fn(pageIndex); 23 | } 24 | }, 25 | }; 26 | }; 27 | 28 | export default jumpToPagePlugin; 29 | -------------------------------------------------------------------------------- /localization/LocalizationExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { LocalizationMap, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | import de_DE from '@react-pdf-viewer/locales/lib/de_DE.json'; 9 | 10 | interface LocalizationExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const LocalizationExample: React.FC = ({ fileUrl }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 16 | 17 | return ( 18 | 23 | ); 24 | }; 25 | 26 | export default LocalizationExample; 27 | -------------------------------------------------------------------------------- /add-margin-between-pages/AddMarginExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import type { PageLayout } from '@react-pdf-viewer/core'; 4 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface AddMarginExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const AddMarginExample: React.FC = ({ fileUrl }) => { 14 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 15 | const pageLayout: PageLayout = { 16 | transformSize: ({ size }) => ({ height: size.height + 30, width: size.width + 30 }), 17 | }; 18 | 19 | return ; 20 | }; 21 | 22 | export default AddMarginExample; 23 | -------------------------------------------------------------------------------- /display-reading-progress-at-the-top/readingIndicatorPlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createStore, Plugin, PluginFunctions } from '@react-pdf-viewer/core'; 3 | 4 | import ReadingIndicator from './ReadingIndicator'; 5 | import StoreProps from './StoreProps'; 6 | 7 | interface ReadingIndicatorPlugin extends Plugin { 8 | ReadingIndicator: () => React.ReactElement; 9 | } 10 | 11 | const readingIndicatorPlugin = (): ReadingIndicatorPlugin => { 12 | const store = React.useMemo(() => createStore({}), []); 13 | 14 | const ReadingIndicatorDecorator = () => ; 15 | 16 | return { 17 | install: (pluginFunctions: PluginFunctions) => { 18 | store.update('getPagesContainer', pluginFunctions.getPagesContainer); 19 | }, 20 | ReadingIndicator: ReadingIndicatorDecorator, 21 | }; 22 | }; 23 | 24 | export default readingIndicatorPlugin; 25 | -------------------------------------------------------------------------------- /keep-scroll-position-after-changing-the-document/isDocumentChangedPlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { DocumentLoadEvent, Plugin } from '@react-pdf-viewer/core'; 3 | 4 | interface DocumentChangedPlugin extends Plugin { 5 | isDocumentChanged: boolean; 6 | } 7 | 8 | export const isDocumentChangedPlugin = (): DocumentChangedPlugin => { 9 | const currentDocumentRef = React.useRef(''); 10 | const [isDocumentChanged, setDocumentChanged] = React.useState(false); 11 | 12 | const handleDocumentLoad = (e: DocumentLoadEvent) => { 13 | const docId = e.doc.loadingTask.docId; 14 | if (currentDocumentRef.current !== '' && currentDocumentRef.current !== docId) { 15 | setDocumentChanged(true); 16 | } 17 | currentDocumentRef.current = docId; 18 | }; 19 | 20 | return { 21 | onDocumentLoad: handleDocumentLoad, 22 | isDocumentChanged, 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /remove-a-tab-from-the-sidebar/RemoveTabExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface RemoveTabExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const RemoveTabExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | sidebarTabs: (defaultTabs) => [ 15 | // Remove the attachments tab (`defaultTabs[2]`) 16 | defaultTabs[0], // Bookmarks tab 17 | defaultTabs[1], // Thumbnails tab 18 | ], 19 | }); 20 | 21 | return ; 22 | }; 23 | 24 | export default RemoveTabExample; 25 | -------------------------------------------------------------------------------- /zoom-to-a-specific-level-programmatically/customZoomPlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createStore, Plugin, PluginFunctions, SpecialZoomLevel } from '@react-pdf-viewer/core'; 3 | 4 | import StoreProps from './StoreProps'; 5 | 6 | interface CustomZoomPlugin extends Plugin { 7 | zoomTo(scale: number | SpecialZoomLevel): void; 8 | } 9 | 10 | const customZoomPlugin = (): CustomZoomPlugin => { 11 | const store = React.useMemo(() => createStore({}), []); 12 | 13 | return { 14 | install: (pluginFunctions: PluginFunctions) => { 15 | store.update('zoom', pluginFunctions.zoom); 16 | }, 17 | zoomTo: (scale: number | SpecialZoomLevel) => { 18 | const zoom = store.get('zoom'); 19 | if (zoom) { 20 | // Zoom to that scale 21 | zoom(scale); 22 | } 23 | }, 24 | }; 25 | }; 26 | 27 | export default customZoomPlugin; 28 | -------------------------------------------------------------------------------- /change-the-order-of-tabs-in-the-sidebar/ChangeTabsOrderExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface ChangeTabsOrderExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ChangeTabsOrderExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | sidebarTabs: (defaultTabs) => [ 15 | defaultTabs[1], // Bookmarks tab 16 | defaultTabs[0], // Thumbnails tab 17 | defaultTabs[2], // Attachments tab 18 | ], 19 | }); 20 | 21 | return ; 22 | }; 23 | 24 | export default ChangeTabsOrderExample; 25 | -------------------------------------------------------------------------------- /display-the-thumbnail-of-a-given-page/DisplayThumbnailExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | import { pageThumbnailPlugin } from './pageThumbnailPlugin'; 8 | 9 | interface DisplayThumbnailExampleProps { 10 | fileUrl: string; 11 | pageIndex: number; 12 | } 13 | 14 | const DisplayThumbnailExample: React.FC = ({ fileUrl, pageIndex }) => { 15 | const thumbnailPluginInstance = thumbnailPlugin(); 16 | const { Cover } = thumbnailPluginInstance; 17 | const pageThumbnailPluginInstance = pageThumbnailPlugin({ 18 | PageThumbnail: pageIndex} />, 19 | }); 20 | 21 | return ; 22 | }; 23 | 24 | export default DisplayThumbnailExample; 25 | -------------------------------------------------------------------------------- /events/EventsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { DocumentLoadEvent, Viewer, ZoomEvent } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface EventsExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const EventsExample: React.FC = ({ fileUrl }) => { 11 | const handleDocumentLoad = (e: DocumentLoadEvent) => { 12 | console.log(`Document is loaded. Number of pages: ${e.doc.numPages}`); 13 | }; 14 | 15 | const handleZoom = (e: ZoomEvent) => { 16 | console.log(`Zoom to ${e.scale}`); 17 | }; 18 | 19 | return ( 20 |
26 | 27 |
28 | ); 29 | }; 30 | 31 | export default EventsExample; 32 | -------------------------------------------------------------------------------- /set-the-target-pages-when-printing-a-document/SetPagesDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 3 | import { getEvenPagesNumbers } from '@react-pdf-viewer/print'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface SetPagesDefaultLayoutExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const SetPagesDefaultLayoutExample: React.FC = ({ fileUrl }) => { 14 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 15 | toolbarPlugin: { 16 | printPlugin: { 17 | setPages: getEvenPagesNumbers, 18 | }, 19 | }, 20 | }); 21 | 22 | return ; 23 | }; 24 | 25 | export default SetPagesDefaultLayoutExample; 26 | -------------------------------------------------------------------------------- /default-layout/OpenSidebarTabExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { DocumentLoadEvent, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface OpenSidebarTabExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const OpenSidebarTabExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | const handleDocumentLoad = (e: DocumentLoadEvent) => { 16 | const { activateTab } = defaultLayoutPluginInstance; 17 | 18 | // Activate the bookmark tab whose index is `1` 19 | activateTab(1); 20 | }; 21 | 22 | return ; 23 | }; 24 | 25 | export default OpenSidebarTabExample; 26 | -------------------------------------------------------------------------------- /use-a-rtl-language/RtlExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { LocalizationMap, TextDirection, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | import ar_AE from '@react-pdf-viewer/locales/lib/ar_AE.json'; 9 | 10 | interface RtlExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const RtlExample: React.FC = ({ fileUrl }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 16 | 17 | return ( 18 | 26 | ); 27 | }; 28 | 29 | export default RtlExample; 30 | -------------------------------------------------------------------------------- /zoom-after-full-screen/zoomAfterFullScreen.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createStore, Plugin, PluginFunctions, RenderViewer, Slot } from '@react-pdf-viewer/core'; 3 | 4 | import StoreProps from './StoreProps'; 5 | import Tracker from './Tracker'; 6 | 7 | const zoomAfterFullScreen = (): Plugin => { 8 | const store = React.useMemo(() => createStore({}), []); 9 | 10 | const renderViewer = (props: RenderViewer): Slot => { 11 | const { slot } = props; 12 | slot.children = ( 13 | <> 14 | 15 | {slot.children} 16 | 17 | ); 18 | return slot; 19 | }; 20 | 21 | return { 22 | install: (pluginFunctions: PluginFunctions) => { 23 | store.update('getPagesContainer', pluginFunctions.getPagesContainer); 24 | store.update('zoom', pluginFunctions.zoom); 25 | }, 26 | renderViewer, 27 | }; 28 | }; 29 | 30 | export default zoomAfterFullScreen; 31 | -------------------------------------------------------------------------------- /keep-scale-level-after-changing-the-document/KeepScaleLevelExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 3 | import * as React from 'react'; 4 | import { trackScalePlugin } from './trackScalePlugin'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface KeepScaleLevelExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | export const KeepScaleLevelExample: React.FC = ({ fileUrl }) => { 14 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 15 | const trackScalePluginInstance = trackScalePlugin({ 16 | initialScale: 0.5, 17 | }); 18 | const { scale } = trackScalePluginInstance; 19 | 20 | return ( 21 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /use-the-last-chosen-theme/UseLastThemeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface UseLastThemeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const UseLastThemeExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 14 | 15 | const handleSwitchTheme = (theme: string) => { 16 | localStorage.setItem('current-theme', theme); 17 | }; 18 | 19 | const theme = localStorage.getItem('current-theme') || 'light'; 20 | 21 | return ( 22 | 28 | ); 29 | }; 30 | 31 | export default UseLastThemeExample; 32 | -------------------------------------------------------------------------------- /zoom-after-full-screen/ZoomAfterFullScreenExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | import zoomAfterFullScreen from './zoomAfterFullScreen'; 9 | 10 | interface ZoomAfterFullScreenExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const ZoomAfterFullScreenExampleProps: React.FC = ({ fileUrl }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 16 | const zoomAfterFullScreenInstance = zoomAfterFullScreen(); 17 | 18 | return ( 19 |
24 | 25 |
26 | ); 27 | }; 28 | 29 | export default ZoomAfterFullScreenExampleProps; 30 | -------------------------------------------------------------------------------- /replace-the-canvas-with-svg-layer/SvgLayerExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RenderPageProps, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | interface SvgLayerExampleProps { 5 | fileUrl: string; 6 | } 7 | 8 | const CustomPageLayer: React.FC<{ 9 | renderPageProps: RenderPageProps; 10 | }> = ({ renderPageProps }) => { 11 | React.useEffect(() => { 12 | if (renderPageProps.textLayerRendered) { 13 | renderPageProps.markRendered(renderPageProps.pageIndex); 14 | } 15 | }, [renderPageProps.textLayerRendered]); 16 | 17 | return ( 18 | <> 19 | {renderPageProps.svgLayer.children} 20 | {renderPageProps.textLayer.children} 21 | {renderPageProps.annotationLayer.children} 22 | 23 | ); 24 | }; 25 | 26 | const SvgLayerExample: React.FC = ({ fileUrl }) => { 27 | return ( 28 | } 31 | /> 32 | ); 33 | }; 34 | 35 | export default SvgLayerExample; 36 | -------------------------------------------------------------------------------- /default-layout/RenderToolbarExample.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin, ToolbarProps } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | const RenderToolbarExample: React.FC<{}> = () => { 9 | const renderToolbar = (Toolbar: (props: ToolbarProps) => ReactElement) => ( 10 | <> 11 | 12 |
19 | Custom element 20 |
21 | 22 | ); 23 | 24 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 25 | renderToolbar, 26 | }); 27 | 28 | return ; 29 | }; 30 | 31 | export default RenderToolbarExample; 32 | -------------------------------------------------------------------------------- /include-the-default-sidebar-in-the-full-screen-mode/IncludeSidebarFullScreenModeDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface IncludeSidebarFullScreenModeDefaultLayoutExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const IncludeSidebarFullScreenModeDefaultLayoutExample: React.FC< 13 | IncludeSidebarFullScreenModeDefaultLayoutExampleProps 14 | > = ({ fileUrl }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 16 | toolbarPlugin: { 17 | fullScreenPlugin: { 18 | getFullScreenTarget: (pagesContainer) => pagesContainer.closest('[data-testid="core__viewer"]'), 19 | renderExitFullScreenButton: (props) => <>, 20 | }, 21 | }, 22 | }); 23 | 24 | return ; 25 | }; 26 | 27 | export default IncludeSidebarFullScreenModeDefaultLayoutExample; 28 | -------------------------------------------------------------------------------- /include-the-default-toolbar-in-the-full-screen-mode/IncludeToolbarFullScreenModeDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface IncludeToolbarFullScreenModeDefaultLayoutExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const IncludeToolbarFullScreenModeDefaultLayoutExample: React.FC< 13 | IncludeToolbarFullScreenModeDefaultLayoutExampleProps 14 | > = ({ fileUrl }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 16 | toolbarPlugin: { 17 | fullScreenPlugin: { 18 | getFullScreenTarget: (pagesContainer) => pagesContainer.closest('[data-testid="default-layout__body"]'), 19 | renderExitFullScreenButton: (props) => <>, 20 | }, 21 | }, 22 | }); 23 | 24 | return ; 25 | }; 26 | 27 | export default IncludeToolbarFullScreenModeDefaultLayoutExample; 28 | -------------------------------------------------------------------------------- /add-custom-styles-to-the-highlighted-elements/CustomHighlightedElementExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import { OnHighlightKeyword } from '@react-pdf-viewer/search'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface CustomHighlightedElementExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const CustomHighlightedElementExample: React.FC = ({ fileUrl }) => { 14 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 15 | toolbarPlugin: { 16 | searchPlugin: { 17 | keyword: ['document'], 18 | onHighlightKeyword: (props: OnHighlightKeyword) => { 19 | props.highlightEle.style.outline = '1px dashed blue'; 20 | props.highlightEle.style.backgroundColor = 'rgba(0, 0, 0, .1)'; 21 | }, 22 | }, 23 | }, 24 | }); 25 | 26 | return ; 27 | }; 28 | 29 | export default CustomHighlightedElementExample; 30 | -------------------------------------------------------------------------------- /find-and-replace-links-found-in-each-page/findLinksPlugin.ts: -------------------------------------------------------------------------------- 1 | import { LayerRenderStatus, Plugin, PluginOnTextLayerRender } from '@react-pdf-viewer/core'; 2 | import linkifyElement from 'linkify-element'; 3 | 4 | const findLinksPlugin = (): Plugin => { 5 | const findLinks = (e: PluginOnTextLayerRender) => { 6 | if (e.status !== LayerRenderStatus.DidRender) { 7 | return; 8 | } 9 | 10 | // `e.ele` represents the element containing all text elements in each page 11 | // Find all text elements 12 | e.ele 13 | // `rpv-core__text-layer-text` is the CSS class of each text element 14 | .querySelectorAll('.rpv-core__text-layer-text') 15 | .forEach((textEle) => { 16 | linkifyElement(textEle as HTMLElement, { 17 | attributes: { 18 | // Custom styles 19 | style: 'color: transparent; text-decoration: none;', 20 | // Open link in new tab 21 | target: '_blank', 22 | }, 23 | }); 24 | }); 25 | }; 26 | 27 | return { 28 | onTextLayerRender: findLinks, 29 | }; 30 | }; 31 | 32 | export default findLinksPlugin; 33 | -------------------------------------------------------------------------------- /zoom-to-fit-the-screen-after-entering-the-full-screen-mode/ZoomToFitScreenInFullScreenModeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SpecialZoomLevel, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface ZoomToFitScreenInFullScreenModeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ZoomToFitScreenInFullScreenModeExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | toolbarPlugin: { 15 | fullScreenPlugin: { 16 | // Zoom to fit the screen after entering and exiting the full screen mode 17 | onEnterFullScreen: (zoom) => { 18 | zoom(SpecialZoomLevel.PageFit); 19 | }, 20 | onExitFullScreen: (zoom) => { 21 | zoom(SpecialZoomLevel.PageFit); 22 | }, 23 | }, 24 | }, 25 | }); 26 | 27 | return ; 28 | }; 29 | 30 | export default ZoomToFitScreenInFullScreenModeExample; 31 | -------------------------------------------------------------------------------- /add-a-new-tab-to-the-sidebar/AddNewTabExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Icon, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface AddNewTabExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const AddNewTabExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | sidebarTabs: (defaultTabs) => 15 | defaultTabs.concat({ 16 | content:
Notes are listed here
, 17 | icon: ( 18 | 19 | 20 | 21 | 22 | 23 | ), 24 | title: 'Notes', 25 | }), 26 | }); 27 | 28 | return ; 29 | }; 30 | 31 | export default AddNewTabExample; 32 | -------------------------------------------------------------------------------- /bookmark/BookmarkExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { bookmarkPlugin } from '@react-pdf-viewer/bookmark'; 3 | import { Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/bookmark/lib/styles/index.css'; 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | 8 | interface BookmarkExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const BookmarkExample: React.FC = ({ fileUrl }) => { 13 | const bookmarkPluginInstance = bookmarkPlugin(); 14 | 15 | const { Bookmarks } = bookmarkPluginInstance; 16 | 17 | return ( 18 |
25 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default BookmarkExample; 42 | -------------------------------------------------------------------------------- /keep-scroll-position-after-changing-the-document/KeepScrollOffsetExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 3 | import * as React from 'react'; 4 | import { isDocumentChangedPlugin } from './isDocumentChangedPlugin'; 5 | import { trackPositionPlugin } from './trackPositionPlugin'; 6 | 7 | import '@react-pdf-viewer/core/lib/styles/index.css'; 8 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 9 | 10 | interface KeepScrollOffsetExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | export const KeepScrollOffsetExample: React.FC = ({ fileUrl }) => { 15 | const [scale, setScale] = React.useState(); 16 | 17 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 18 | const isDocumentChangedPluginInstance = isDocumentChangedPlugin(); 19 | const { isDocumentChanged } = isDocumentChangedPluginInstance; 20 | const trackPositionPluginInstance = trackPositionPlugin({ 21 | isDocumentChanged, 22 | updateScale: setScale, 23 | }); 24 | 25 | return ( 26 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /thumbnail/ThumbnailExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/thumbnail/lib/styles/index.css'; 7 | 8 | interface ThumbnailExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ThumbnailExample: React.FC = ({ fileUrl }) => { 13 | const thumbnailPluginInstance = thumbnailPlugin(); 14 | const { Thumbnails } = thumbnailPluginInstance; 15 | 16 | return ( 17 |
25 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default ThumbnailExample; 42 | -------------------------------------------------------------------------------- /zoom-after-full-screen/Tracker.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SpecialZoomLevel, Store } from '@react-pdf-viewer/core'; 3 | 4 | import StoreProps from './StoreProps'; 5 | 6 | const Tracker: React.FC<{ 7 | store: Store; 8 | }> = ({ store }) => { 9 | const handleFullScreenChange = (): void => { 10 | const fullScreenEle = document.fullscreenElement; 11 | const getPagesContainer = store.get('getPagesContainer'); 12 | const zoom = store.get('zoom'); 13 | 14 | if (fullScreenEle && getPagesContainer && getPagesContainer() === fullScreenEle && zoom) { 15 | zoom(SpecialZoomLevel.PageFit); 16 | } 17 | }; 18 | 19 | React.useEffect(() => { 20 | document.addEventListener('fullscreenchange', handleFullScreenChange); 21 | document.addEventListener('MSFullscreenChange', handleFullScreenChange); 22 | document.addEventListener('webkitfullscreenchange', handleFullScreenChange); 23 | 24 | return (): void => { 25 | document.removeEventListener('fullscreenchange', handleFullScreenChange); 26 | document.removeEventListener('MSFullscreenChange', handleFullScreenChange); 27 | document.removeEventListener('webkitfullscreenchange', handleFullScreenChange); 28 | }; 29 | }, []); 30 | 31 | return <>; 32 | }; 33 | 34 | export default Tracker; 35 | -------------------------------------------------------------------------------- /attachment/AttachmentExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { attachmentPlugin } from '@react-pdf-viewer/attachment'; 3 | import { Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/attachment/lib/styles/index.css'; 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | 8 | interface AttachmentExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const AttachmentExample: React.FC = ({ fileUrl }) => { 13 | // Create new instance of attachment plugin 14 | const attachmentPluginInstance = attachmentPlugin(); 15 | 16 | const { Attachments } = attachmentPluginInstance; 17 | 18 | return ( 19 |
26 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | ); 40 | }; 41 | 42 | export default AttachmentExample; 43 | -------------------------------------------------------------------------------- /jump-to-the-first-match-of-pre-defined-keywords-automatically/JumpToFirstMatchExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import type { SingleKeyword } from '@react-pdf-viewer/search'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface JumpToFirstMatchExampleProps { 10 | fileUrl: string; 11 | keyword: SingleKeyword | SingleKeyword[]; 12 | } 13 | 14 | const JumpToFirstMatchExample: React.FC = ({ fileUrl, keyword }) => { 15 | const [isDocumentLoaded, setDocumentLoaded] = React.useState(false); 16 | const handleDocumentLoad = () => setDocumentLoaded(true); 17 | 18 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 19 | const { toolbarPluginInstance } = defaultLayoutPluginInstance; 20 | const { searchPluginInstance } = toolbarPluginInstance; 21 | const { highlight } = searchPluginInstance; 22 | 23 | React.useEffect(() => { 24 | if (isDocumentLoaded) { 25 | highlight(keyword); 26 | } 27 | }, [isDocumentLoaded]); 28 | 29 | return ; 30 | }; 31 | 32 | export default JumpToFirstMatchExample; 33 | -------------------------------------------------------------------------------- /keep-scroll-position-after-changing-the-document/trackPositionPlugin.tsx: -------------------------------------------------------------------------------- 1 | import type { Plugin, PluginFunctions, RenderViewer, Slot, ViewerState } from '@react-pdf-viewer/core'; 2 | import { createStore } from '@react-pdf-viewer/core'; 3 | import * as React from 'react'; 4 | import { PositionTracker } from './PositionTracker'; 5 | import type { StoreProps } from './StoreProps'; 6 | 7 | export const trackPositionPlugin = ({ 8 | isDocumentChanged, 9 | updateScale, 10 | }: { 11 | isDocumentChanged: boolean; 12 | updateScale: (scale: number) => void; 13 | }): Plugin => { 14 | const store = React.useMemo(() => createStore({}), []); 15 | 16 | const handleViewerStateChanged = (state: ViewerState) => { 17 | updateScale(state.scale); 18 | return state; 19 | }; 20 | 21 | const renderViewer = (props: RenderViewer): Slot => { 22 | const { slot } = props; 23 | slot.children = ( 24 | <> 25 | 26 | {slot.children} 27 | 28 | ); 29 | 30 | return slot; 31 | }; 32 | 33 | return { 34 | install: (pluginFunctions: PluginFunctions) => { 35 | store.update('getPagesContainer', pluginFunctions.getPagesContainer); 36 | }, 37 | onViewerStateChange: handleViewerStateChanged, 38 | renderViewer, 39 | }; 40 | }; 41 | -------------------------------------------------------------------------------- /show-search-results-in-a-sidebar/SearchSidebarExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { searchPlugin } from '@react-pdf-viewer/search'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/search/lib/styles/index.css'; 7 | 8 | import SearchSidebar from './SearchSidebar'; 9 | 10 | interface SearchSidebarExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const SearchSidebarExample: React.FC = ({ fileUrl }) => { 15 | const searchPluginInstance = searchPlugin(); 16 | 17 | return ( 18 |
26 |
33 | 34 |
35 | 36 |
37 | 38 |
39 |
40 | ); 41 | }; 42 | 43 | export default SearchSidebarExample; 44 | -------------------------------------------------------------------------------- /customize-the-button-to-exit-the-full-screen-mode/CustomExitFullScreenButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PrimaryButton, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface CustomExitFullScreenButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomExitFullScreenButtonExample: React.FC = ({ fileUrl }) => { 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | toolbarPlugin: { 15 | fullScreenPlugin: { 16 | renderExitFullScreenButton: (props) => ( 17 |
25 | Exit full screen 26 |
27 | ), 28 | }, 29 | }, 30 | }); 31 | 32 | return ; 33 | }; 34 | 35 | export default CustomExitFullScreenButtonExample; 36 | -------------------------------------------------------------------------------- /customize-the-width-of-thumbnails/CustomWidthExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/thumbnail/lib/styles/index.css'; 7 | 8 | interface CustomWidthExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomWidthExample: React.FC = ({ fileUrl }) => { 13 | const thumbnailPluginInstance = thumbnailPlugin({ 14 | thumbnailWidth: 150, 15 | }); 16 | const { Thumbnails } = thumbnailPluginInstance; 17 | 18 | return ( 19 |
27 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | ); 41 | }; 42 | 43 | export default CustomWidthExample; 44 | -------------------------------------------------------------------------------- /customize-thumbnail-spinners/CustomThumbnailSpinnerExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | 5 | import './square-spinner.css'; 6 | 7 | interface CustomThumbnailSpinnerExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const CustomThumbnailSpinnerExample: React.FC = ({ fileUrl }) => { 12 | const thumbnailPluginInstance = thumbnailPlugin({ 13 | renderSpinner: () =>
, 14 | }); 15 | const { Thumbnails } = thumbnailPluginInstance; 16 | 17 | return ( 18 |
26 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | ); 40 | }; 41 | 42 | export default CustomThumbnailSpinnerExample; 43 | -------------------------------------------------------------------------------- /customize-the-zoom-levels/CustomizeZoomLevelsDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import type { ToolbarProps, ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface CustomizeZoomLevelsDefaultLayoutExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const CustomizeZoomLevelsDefaultLayoutExample: React.FC = ({ 14 | fileUrl, 15 | }) => { 16 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 17 | renderToolbar: (Toolbar: (props: ToolbarProps) => React.ReactElement) => ( 18 | {renderDefaultToolbar(transform)} 19 | ), 20 | }); 21 | 22 | const { renderDefaultToolbar } = defaultLayoutPluginInstance.toolbarPluginInstance; 23 | 24 | const transform: TransformToolbarSlot = (slot: ToolbarSlot) => { 25 | const { Zoom } = slot; 26 | return Object.assign({}, slot, { 27 | Zoom: () => , 28 | }); 29 | }; 30 | 31 | return ; 32 | }; 33 | 34 | export default CustomizeZoomLevelsDefaultLayoutExample; 35 | -------------------------------------------------------------------------------- /set-a-bookmark-expanded-or-collapsed-initially/SetBookmarkExpandedExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { bookmarkPlugin } from '@react-pdf-viewer/bookmark'; 3 | import { Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/bookmark/lib/styles/index.css'; 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | 8 | interface SetBookmarkExpandedExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const SetBookmarkExpandedExample: React.FC = ({ fileUrl }) => { 13 | const bookmarkPluginInstance = bookmarkPlugin(); 14 | const { Bookmarks } = bookmarkPluginInstance; 15 | 16 | const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => depth === 0; 17 | 18 | return ( 19 |
26 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | ); 40 | }; 41 | 42 | export default SetBookmarkExpandedExample; 43 | -------------------------------------------------------------------------------- /customize-the-zoom-levels/CustomizeZoomLevelsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { zoomPlugin } from '@react-pdf-viewer/zoom'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/zoom/lib/styles/index.css'; 7 | 8 | interface CustomizeZoomLevelsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizeZoomLevelsExample: React.FC = ({ fileUrl }) => { 13 | const zoomPluginInstance = zoomPlugin(); 14 | const { Zoom } = zoomPluginInstance; 15 | 16 | return ( 17 |
24 |
32 | 33 |
34 |
40 | 41 |
42 |
43 | ); 44 | }; 45 | 46 | export default CustomizeZoomLevelsExample; 47 | -------------------------------------------------------------------------------- /open-a-confirmation-modal-when-users-click-a-link/openLinksPlugin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createStore } from '@react-pdf-viewer/core'; 3 | import type { Plugin, PluginOnAnnotationLayerRender, RenderViewer, Slot } from '@react-pdf-viewer/core'; 4 | 5 | import ConfirmationModal from './ConfirmationModal'; 6 | import StoreProps from './StoreProps'; 7 | 8 | const openLinksPlugin = (): Plugin => { 9 | const store = React.useMemo(() => createStore({}), []); 10 | 11 | const handleClick = (e: Event) => { 12 | e.preventDefault(); 13 | const href = (e.target as HTMLLinkElement).href; 14 | store.update('clickedTarget', href); 15 | }; 16 | 17 | const findLinks = (e: PluginOnAnnotationLayerRender) => { 18 | e.container.querySelectorAll('a[data-target="external"]').forEach((link) => { 19 | link.addEventListener('click', handleClick); 20 | }); 21 | }; 22 | 23 | const renderViewer = (renderViewerProps: RenderViewer): Slot => { 24 | const currentSlot = renderViewerProps.slot; 25 | if (currentSlot.subSlot) { 26 | currentSlot.subSlot.children = ( 27 | <> 28 | 29 | {currentSlot.subSlot.children} 30 | 31 | ); 32 | } 33 | 34 | return currentSlot; 35 | }; 36 | 37 | return { 38 | onAnnotationLayerRender: findLinks, 39 | renderViewer, 40 | }; 41 | }; 42 | 43 | export default openLinksPlugin; 44 | -------------------------------------------------------------------------------- /switch-to-a-scroll-mode/SwitchScrollModeInFullScreenModeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ScrollMode, SpecialZoomLevel, Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface SwitchScrollModeInFullScreenModeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const SwitchScrollModeInFullScreenModeExample: React.FC = ({ 13 | fileUrl, 14 | }) => { 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 16 | toolbarPlugin: { 17 | fullScreenPlugin: { 18 | onEnterFullScreen: (zoom) => { 19 | zoom(SpecialZoomLevel.PageFit); 20 | defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode( 21 | ScrollMode.Wrapped 22 | ); 23 | }, 24 | onExitFullScreen: (zoom) => { 25 | zoom(SpecialZoomLevel.PageWidth); 26 | defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode( 27 | ScrollMode.Vertical 28 | ); 29 | }, 30 | }, 31 | }, 32 | }); 33 | 34 | return ; 35 | }; 36 | 37 | export default SwitchScrollModeInFullScreenModeExample; 38 | -------------------------------------------------------------------------------- /get-file/DownloadButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { getFilePlugin } from '@react-pdf-viewer/get-file'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface DownloadButtonExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const DownloadButtonExample: React.FC = ({ fileUrl }) => { 12 | const getFilePluginInstance = getFilePlugin(); 13 | const { DownloadButton } = getFilePluginInstance; 14 | 15 | return ( 16 |
25 |
34 | 35 |
36 |
42 | 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default DownloadButtonExample; 49 | -------------------------------------------------------------------------------- /open/OpenButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { openPlugin } from '@react-pdf-viewer/open'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/open/lib/styles/index.css'; 7 | 8 | interface OpenButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const OpenButtonExample: React.FC = ({ fileUrl }) => { 13 | const openPluginInstance = openPlugin(); 14 | const { OpenButton } = openPluginInstance; 15 | 16 | return ( 17 |
26 |
35 | 36 |
37 |
43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default OpenButtonExample; 50 | -------------------------------------------------------------------------------- /draw-on-top-of-the-canvas-layer/DrawCanvasExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { LayerRenderStatus, Plugin, PluginOnCanvasLayerRender, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | interface DrawCanvasExampleProps { 5 | fileUrl: string; 6 | } 7 | 8 | const DrawCanvasExample: React.FC = ({ fileUrl }) => { 9 | const message = 'customer@email.com'; 10 | 11 | const customCanvasPlugin = (): Plugin => { 12 | const onCanvasLayerRender = (e: PluginOnCanvasLayerRender) => { 13 | // Return if the canvas isn't rendered completely 14 | if (e.status !== LayerRenderStatus.DidRender) { 15 | return; 16 | } 17 | 18 | // `e.ele` is the canvas element 19 | const canvas = e.ele; 20 | 21 | const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; 22 | const centerX = canvas.width / 2; 23 | const centerY = canvas.height / 2; 24 | 25 | const fonts = ctx.font.split(' '); 26 | const fontSize = parseInt(fonts[0], 10); 27 | 28 | ctx.textAlign = 'center'; 29 | ctx.font = `${fontSize * e.scale * 4}px ${fonts[1]}`; 30 | 31 | ctx.fillStyle = '#CCC'; 32 | ctx.fillText(message, centerX, 100); 33 | }; 34 | 35 | return { 36 | onCanvasLayerRender, 37 | }; 38 | }; 39 | 40 | const customCanvasPluginInstance = customCanvasPlugin(); 41 | 42 | return ; 43 | }; 44 | 45 | export default DrawCanvasExample; 46 | -------------------------------------------------------------------------------- /remove-some-parts-from-the-default-toolbar/RemovePartsDefaultToolbarDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import type { ToolbarProps, ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface RemovePartsDefaultToolbarDefaultLayoutExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const RemovePartsDefaultToolbarDefaultLayoutExample: React.FC = ({ 14 | fileUrl, 15 | }) => { 16 | const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({ 17 | ...slot, 18 | Download: () => <>, 19 | DownloadMenuItem: () => <>, 20 | EnterFullScreen: () => <>, 21 | EnterFullScreenMenuItem: () => <>, 22 | SwitchTheme: () => <>, 23 | SwitchThemeMenuItem: () => <>, 24 | }); 25 | 26 | const renderToolbar = (Toolbar: (props: ToolbarProps) => React.ReactElement) => ( 27 | {renderDefaultToolbar(transform)} 28 | ); 29 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 30 | renderToolbar, 31 | }); 32 | const { renderDefaultToolbar } = defaultLayoutPluginInstance.toolbarPluginInstance; 33 | 34 | return ; 35 | }; 36 | 37 | export default RemovePartsDefaultToolbarDefaultLayoutExample; 38 | -------------------------------------------------------------------------------- /print/PrintButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { printPlugin } from '@react-pdf-viewer/print'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/print/lib/styles/index.css'; 7 | 8 | interface PrintButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const PrintButtonExample: React.FC = ({ fileUrl }) => { 13 | const printPluginInstance = printPlugin(); 14 | const { PrintButton } = printPluginInstance; 15 | 16 | return ( 17 |
26 |
35 | 36 |
37 |
43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default PrintButtonExample; 50 | -------------------------------------------------------------------------------- /jump-to-given-page/JumpToGivenPageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | import jumpToPagePlugin from './jumpToPagePlugin'; 7 | 8 | interface JumpToGivenPageExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const JumpToGivenPageExample: React.FC = ({ fileUrl }) => { 13 | const jumpToPagePluginInstance = jumpToPagePlugin(); 14 | const { jumpToPage } = jumpToPagePluginInstance; 15 | 16 | return ( 17 | <> 18 |
23 | 36 |
37 |
43 | 44 |
45 | 46 | ); 47 | }; 48 | 49 | export default JumpToGivenPageExample; 50 | -------------------------------------------------------------------------------- /toolbar/DefaultToolbarExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 7 | 8 | interface DefaultToolbarExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const DefaultToolbarExample: React.FC = ({ fileUrl }) => { 13 | const toolbarPluginInstance = toolbarPlugin(); 14 | const { Toolbar } = toolbarPluginInstance; 15 | 16 | return ( 17 |
26 |
35 | 36 |
37 |
43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default DefaultToolbarExample; 50 | -------------------------------------------------------------------------------- /add-a-watermark/WaterMarkExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RenderPage, RenderPageProps, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface WaterMarkExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const WaterMarkExample: React.FC = ({ fileUrl }) => { 11 | const renderPage: RenderPage = (props: RenderPageProps) => ( 12 | <> 13 | {props.canvasLayer.children} 14 |
26 |
36 | Draft 37 |
38 |
39 | {props.annotationLayer.children} 40 | {props.textLayer.children} 41 | 42 | ); 43 | 44 | return ; 45 | }; 46 | 47 | export default WaterMarkExample; 48 | -------------------------------------------------------------------------------- /customize-link-annotation/CustomLinkAnnotationExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AnnotationType, Plugin, PluginOnAnnotationLayerRender, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 5 | 6 | interface CustomLinkAnnotationExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const customAnnotationPlugin = (): Plugin => { 11 | const onAnnotationLayerRender = (e: PluginOnAnnotationLayerRender) => { 12 | // Find all `Link` annotation 13 | e.annotations 14 | .filter((annotation) => annotation.annotationType === AnnotationType.Link) 15 | .forEach((annotation) => { 16 | if (annotation.url) { 17 | // Find the `a` element represents the link 18 | [...e.container.querySelectorAll('.rpv-core-annotation-link a')].forEach((linkEle) => { 19 | linkEle.setAttribute('target', '_blank'); 20 | }); 21 | } 22 | }); 23 | }; 24 | 25 | return { 26 | onAnnotationLayerRender, 27 | }; 28 | }; 29 | 30 | const CustomLinkAnnotationExample: React.FC = ({ fileUrl }) => { 31 | const customAnnotationPluginInstance = customAnnotationPlugin(); 32 | 33 | return ( 34 |
40 | 41 |
42 | ); 43 | }; 44 | 45 | export default CustomLinkAnnotationExample; 46 | -------------------------------------------------------------------------------- /display-reading-progress-at-the-top/ReadingProgressExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin, ToolbarProps } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | import readingIndicatorPlugin from './readingIndicatorPlugin'; 9 | 10 | interface ReadingProgressExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const ReadingProgressExample: React.FC = ({ fileUrl }) => { 15 | const readingIndicatorPluginInstance = readingIndicatorPlugin(); 16 | const { ReadingIndicator } = readingIndicatorPluginInstance; 17 | 18 | const renderToolbar = React.useCallback( 19 | (Toolbar: (props: ToolbarProps) => React.ReactElement) => ( 20 | <> 21 | 22 |
31 | 32 |
33 | 34 | ), 35 | [] 36 | ); 37 | 38 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 39 | renderToolbar, 40 | }); 41 | 42 | return ; 43 | }; 44 | 45 | export default ReadingProgressExample; 46 | -------------------------------------------------------------------------------- /full-screen/FullScreenButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { fullScreenPlugin } from '@react-pdf-viewer/full-screen'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/full-screen/lib/styles/index.css'; 7 | 8 | interface FullScreenButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const FullScreenButtonExample: React.FC = ({ fileUrl }) => { 13 | const fullScreenPluginInstance = fullScreenPlugin(); 14 | const { EnterFullScreenButton } = fullScreenPluginInstance; 15 | 16 | return ( 17 |
26 |
35 | 36 |
37 |
43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default FullScreenButtonExample; 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@react-pdf-viewer/examples", 3 | "private": true, 4 | "version": "3.11.0", 5 | "description": "", 6 | "scripts": { 7 | "format": "prettier --write \"**/*.+(css|json|js|jsx|mdx|scss|ts|tsx)\"" 8 | }, 9 | "devDependencies": { 10 | "@types/react": "^18.0.27", 11 | "@types/react-dom": "^18.0.10", 12 | "prettier": "^2.8.3", 13 | "typescript": "^4.9.4" 14 | }, 15 | "dependencies": { 16 | "@react-pdf-viewer/attachment": "3.11.0", 17 | "@react-pdf-viewer/bookmark": "3.11.0", 18 | "@react-pdf-viewer/core": "3.11.0", 19 | "@react-pdf-viewer/default-layout": "3.11.0", 20 | "@react-pdf-viewer/drop": "3.11.0", 21 | "@react-pdf-viewer/full-screen": "3.11.0", 22 | "@react-pdf-viewer/get-file": "3.11.0", 23 | "@react-pdf-viewer/highlight": "3.11.0", 24 | "@react-pdf-viewer/locale-switcher": "3.11.0", 25 | "@react-pdf-viewer/locales": "^1.0.0", 26 | "@react-pdf-viewer/open": "3.11.0", 27 | "@react-pdf-viewer/page-navigation": "3.11.0", 28 | "@react-pdf-viewer/print": "3.11.0", 29 | "@react-pdf-viewer/properties": "3.11.0", 30 | "@react-pdf-viewer/rotate": "3.11.0", 31 | "@react-pdf-viewer/scroll-mode": "3.11.0", 32 | "@react-pdf-viewer/search": "3.11.0", 33 | "@react-pdf-viewer/selection-mode": "3.11.0", 34 | "@react-pdf-viewer/theme": "3.11.0", 35 | "@react-pdf-viewer/thumbnail": "3.11.0", 36 | "@react-pdf-viewer/toolbar": "3.11.0", 37 | "@react-pdf-viewer/zoom": "3.11.0", 38 | "pdfjs-dist": "^3.2.146", 39 | "react": "^18.2.0", 40 | "react-dom": "^18.2.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /display-reading-progress-at-the-top/ReadingIndicator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Store } from '@react-pdf-viewer/core'; 3 | 4 | import StoreProps from './StoreProps'; 5 | 6 | interface ReadingIndicatorProps { 7 | store: Store; 8 | } 9 | 10 | const ReadingIndicator: React.FC = ({ store }) => { 11 | const [percentages, setPercentages] = React.useState(0); 12 | 13 | const handleScroll = (e: Event) => { 14 | const target = e.target; 15 | if (target instanceof HTMLDivElement) { 16 | const p = Math.floor((100 * target.scrollTop) / (target.scrollHeight - target.clientHeight)); 17 | setPercentages(Math.min(100, p)); 18 | } 19 | }; 20 | 21 | const handlePagesContainer = () => { 22 | const getPagesContainer = store.get('getPagesContainer'); 23 | if (!getPagesContainer) { 24 | return; 25 | } 26 | 27 | const pagesEle = getPagesContainer(); 28 | pagesEle.addEventListener('scroll', handleScroll); 29 | }; 30 | 31 | React.useLayoutEffect(() => { 32 | store.subscribe('getPagesContainer', handlePagesContainer); 33 | 34 | return () => store.unsubscribe('getPagesContainer', handlePagesContainer); 35 | }, []); 36 | 37 | return ( 38 |
43 |
50 |
51 | ); 52 | }; 53 | 54 | export default ReadingIndicator; 55 | -------------------------------------------------------------------------------- /search/ShowSearchPopoverButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { searchPlugin } from '@react-pdf-viewer/search'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/search/lib/styles/index.css'; 7 | 8 | interface ShowSearchPopoverButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ShowSearchPopoverButtonExample: React.FC = ({ fileUrl }) => { 13 | const searchPluginInstance = searchPlugin({ 14 | keyword: 'PDF', 15 | }); 16 | const { ShowSearchPopoverButton } = searchPluginInstance; 17 | 18 | return ( 19 |
28 |
37 | 38 |
39 |
45 | 46 |
47 |
48 | ); 49 | }; 50 | 51 | export default ShowSearchPopoverButtonExample; 52 | -------------------------------------------------------------------------------- /preview-a-pdf-file-before-uploading/PreviewLocalFile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | const PreviewLocalFile: React.FC<{}> = () => { 7 | const [url, setUrl] = React.useState(''); 8 | 9 | const onChange = (e: React.ChangeEvent) => { 10 | const files = e.target.files; 11 | files.length > 0 && setUrl(URL.createObjectURL(files[0])); 12 | }; 13 | 14 | return ( 15 |
16 | 17 | 18 |
19 | {url ? ( 20 |
26 | 27 |
28 | ) : ( 29 |
40 | Preview area 41 |
42 | )} 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default PreviewLocalFile; 49 | -------------------------------------------------------------------------------- /properties/ShowPropertiesButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { propertiesPlugin } from '@react-pdf-viewer/properties'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/properties/lib/styles/index.css'; 7 | 8 | interface ShowPropertiesButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ShowPropertiesButtonExample: React.FC = ({ fileUrl }) => { 13 | const propertiesPluginInstance = propertiesPlugin(); 14 | const { ShowPropertiesButton } = propertiesPluginInstance; 15 | 16 | return ( 17 |
26 |
36 | 37 |
38 |
44 | 45 |
46 |
47 | ); 48 | }; 49 | 50 | export default ShowPropertiesButtonExample; 51 | -------------------------------------------------------------------------------- /search/HighlightMultipleKeywordsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { searchPlugin } from '@react-pdf-viewer/search'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/search/lib/styles/index.css'; 7 | 8 | interface HighlightMultipleKeywordsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const HighlightMultipleKeywordsExample: React.FC = ({ fileUrl }) => { 13 | const searchPluginInstance = searchPlugin({ 14 | keyword: ['document', 'PDF'], 15 | }); 16 | const { ShowSearchPopoverButton } = searchPluginInstance; 17 | 18 | return ( 19 |
28 |
37 | 38 |
39 |
45 | 46 |
47 |
48 | ); 49 | }; 50 | 51 | export default HighlightMultipleKeywordsExample; 52 | -------------------------------------------------------------------------------- /show-custom-page-labels-for-thumbnails/CustomLabelExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | import type { RenderCurrentPageLabel, RenderCurrentPageLabelProps } from '@react-pdf-viewer/thumbnail'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/thumbnail/lib/styles/index.css'; 8 | 9 | interface CustomLabelExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const CustomLabelExample: React.FC = ({ fileUrl }) => { 14 | const renderCurrentPageLabel: RenderCurrentPageLabel = (props: RenderCurrentPageLabelProps) => ( 15 | <> 16 | {props.pageIndex + 1} 17 | {props.pageLabel !== `${props.pageIndex + 1}` && `(${props.pageLabel})`} 18 | 19 | ); 20 | 21 | const thumbnailPluginInstance = thumbnailPlugin({ 22 | renderCurrentPageLabel, 23 | }); 24 | const { Thumbnails } = thumbnailPluginInstance; 25 | 26 | return ( 27 |
35 |
42 | 43 |
44 |
45 | 46 |
47 |
48 | ); 49 | }; 50 | 51 | export default CustomLabelExample; 52 | -------------------------------------------------------------------------------- /rotate/RotateButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { rotatePlugin } from '@react-pdf-viewer/rotate'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface RotateButtonsExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const RotateButtonsExample: React.FC = ({ fileUrl }) => { 12 | const rotatePluginInstance = rotatePlugin(); 13 | const { RotateBackwardButton, RotateForwardButton } = rotatePluginInstance; 14 | 15 | return ( 16 |
25 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
48 | 49 |
50 |
51 | ); 52 | }; 53 | 54 | export default RotateButtonsExample; 55 | -------------------------------------------------------------------------------- /get-file/CustomizeFileNameExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { OpenFile, Viewer } from '@react-pdf-viewer/core'; 3 | import { getFilePlugin } from '@react-pdf-viewer/get-file'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface CustomizeFileNameExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const CustomizeFileNameExample: React.FC = ({ fileUrl }) => { 12 | const getFilePluginInstance = getFilePlugin({ 13 | fileNameGenerator: (file: OpenFile) => { 14 | // `file.name` is the URL of opened file 15 | const fileName = file.name.substring(file.name.lastIndexOf('/') + 1); 16 | return `a-copy-of-${fileName}`; 17 | }, 18 | }); 19 | const { DownloadButton } = getFilePluginInstance; 20 | 21 | return ( 22 |
31 |
40 | 41 |
42 |
48 | 49 |
50 |
51 | ); 52 | }; 53 | 54 | export default CustomizeFileNameExample; 55 | -------------------------------------------------------------------------------- /customize-error-renderer/RenderErrorExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { LoadError, Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | interface RenderErrorExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const RenderErrorExample: React.FC = ({ fileUrl }) => { 11 | const renderError = (error: LoadError) => { 12 | let message = ''; 13 | switch (error.name) { 14 | case 'InvalidPDFException': 15 | message = 'The document is invalid or corrupted'; 16 | break; 17 | case 'MissingPDFException': 18 | message = 'The document is missing'; 19 | break; 20 | case 'UnexpectedResponseException': 21 | message = 'Unexpected server response'; 22 | break; 23 | default: 24 | message = 'Cannot load the document'; 25 | break; 26 | } 27 | 28 | return ( 29 |
38 |
46 | {message} 47 |
48 |
49 | ); 50 | }; 51 | 52 | return ; 53 | }; 54 | 55 | export default RenderErrorExample; 56 | -------------------------------------------------------------------------------- /render-the-highlight-areas/RenderHighlightAreasExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import { highlightPlugin, Trigger } from '@react-pdf-viewer/highlight'; 5 | 6 | import type { HighlightArea, RenderHighlightsProps } from '@react-pdf-viewer/highlight'; 7 | 8 | import '@react-pdf-viewer/core/lib/styles/index.css'; 9 | import '@react-pdf-viewer/highlight/lib/styles/index.css'; 10 | 11 | interface RenderHighlightAreasExampleProps { 12 | areas: HighlightArea[]; 13 | fileUrl: string; 14 | } 15 | 16 | const RenderHighlightAreasExample: React.FC = ({ areas, fileUrl }) => { 17 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 18 | 19 | const renderHighlights = (props: RenderHighlightsProps) => ( 20 |
21 | {areas 22 | .filter((area) => area.pageIndex === props.pageIndex) 23 | .map((area, idx) => ( 24 |
36 | ))} 37 |
38 | ); 39 | 40 | const highlightPluginInstance = highlightPlugin({ 41 | renderHighlights, 42 | trigger: Trigger.None, 43 | }); 44 | 45 | return ; 46 | }; 47 | 48 | export default RenderHighlightAreasExample; 49 | -------------------------------------------------------------------------------- /page-navigation/CurrentPageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { pageNavigationPlugin, RenderCurrentPageLabelProps } from '@react-pdf-viewer/page-navigation'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/page-navigation/lib/styles/index.css'; 7 | 8 | interface CurrentPageExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CurrentPageExample: React.FC = ({ fileUrl }) => { 13 | const pageNavigationPluginInstance = pageNavigationPlugin(); 14 | const { CurrentPageLabel } = pageNavigationPluginInstance; 15 | 16 | return ( 17 |
25 |
35 | 36 | {(props: RenderCurrentPageLabelProps) => ( 37 | {`${props.currentPage + 1} of ${props.numberOfPages}`} 38 | )} 39 | 40 |
41 |
47 | 48 |
49 |
50 | ); 51 | }; 52 | 53 | export default CurrentPageExample; 54 | -------------------------------------------------------------------------------- /include-the-default-toolbar-in-the-full-screen-mode/IncludeToolbarFullScreenModeExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 7 | 8 | interface IncludeToolbarFullScreenModeExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const IncludeToolbarFullScreenModeExample: React.FC = ({ fileUrl }) => { 13 | const toolbarPluginInstance = toolbarPlugin({ 14 | fullScreenPlugin: { 15 | getFullScreenTarget: (pagesContainer) => pagesContainer.closest('.js-viewer-container'), 16 | renderExitFullScreenButton: (props) => <>, 17 | }, 18 | }); 19 | 20 | const { Toolbar } = toolbarPluginInstance; 21 | 22 | return ( 23 |
32 |
41 | 42 |
43 |
49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default IncludeToolbarFullScreenModeExample; 56 | -------------------------------------------------------------------------------- /search-sidebar-with-initial-keyword/SearchSidebarInitialKeywordExample.tsx: -------------------------------------------------------------------------------- 1 | import type { DocumentLoadEvent } from '@react-pdf-viewer/core'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import type { FlagKeyword } from '@react-pdf-viewer/search'; 4 | import { searchPlugin } from '@react-pdf-viewer/search'; 5 | import * as React from 'react'; 6 | 7 | import '@react-pdf-viewer/core/lib/styles/index.css'; 8 | import '@react-pdf-viewer/search/lib/styles/index.css'; 9 | 10 | import { SearchSidebar } from './SearchSidebar'; 11 | 12 | interface SearchSidebarInitialKeywordExampleProps { 13 | fileUrl: string; 14 | keyword?: FlagKeyword; 15 | } 16 | 17 | const SearchSidebarInitialKeywordExample: React.FC = ({ 18 | fileUrl, 19 | keyword, 20 | }) => { 21 | const searchPluginInstance = searchPlugin({ 22 | keyword, 23 | }); 24 | const [isDocumentLoaded, setDocumentLoaded] = React.useState(false); 25 | 26 | const handleDocumentLoad = (e: DocumentLoadEvent) => { 27 | setDocumentLoaded(true); 28 | }; 29 | 30 | return ( 31 |
39 |
46 | 47 |
48 | 49 |
50 | 51 |
52 |
53 | ); 54 | }; 55 | 56 | export default SearchSidebarInitialKeywordExample; 57 | -------------------------------------------------------------------------------- /highlight/RenderHighlightTargetExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { highlightPlugin, MessageIcon, RenderHighlightTargetProps } from '@react-pdf-viewer/highlight'; 3 | import { Button, Position, Tooltip, Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface RenderHighlightTargetExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const RenderHighlightTargetExample: React.FC = ({ fileUrl }) => { 13 | const renderHighlightTarget = (props: RenderHighlightTargetProps) => ( 14 |
25 | 29 | 30 | 31 | } 32 | content={() =>
Add a note
} 33 | offset={{ left: 0, top: -8 }} 34 | /> 35 |
36 | ); 37 | 38 | const highlightPluginInstance = highlightPlugin({ 39 | renderHighlightTarget, 40 | }); 41 | 42 | return ( 43 |
50 | 51 |
52 | ); 53 | }; 54 | 55 | export default RenderHighlightTargetExample; 56 | -------------------------------------------------------------------------------- /print-the-current-document-programmatically/PrintDocumentExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import { printPlugin } from '@react-pdf-viewer/print'; 3 | import * as React from 'react'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/print/lib/styles/index.css'; 7 | 8 | interface PrintDocumentExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const PrintDocumentExample: React.FC = ({ fileUrl }) => { 13 | const printPluginInstance = printPlugin(); 14 | const { print } = printPluginInstance; 15 | 16 | return ( 17 |
25 |
33 | 46 |
47 |
53 | 54 |
55 |
56 | ); 57 | }; 58 | 59 | export default PrintDocumentExample; 60 | -------------------------------------------------------------------------------- /zoom/ZoomButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { zoomPlugin } from '@react-pdf-viewer/zoom'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/zoom/lib/styles/index.css'; 7 | 8 | interface ZoomButtonsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const ZoomButtonsExample: React.FC = ({ fileUrl }) => { 13 | const zoomPluginInstance = zoomPlugin(); 14 | const { ZoomInButton, ZoomOutButton, ZoomPopover } = zoomPluginInstance; 15 | 16 | return ( 17 |
26 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 |
52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default ZoomButtonsExample; 59 | -------------------------------------------------------------------------------- /keep-scroll-position-after-changing-the-document/PositionTracker.tsx: -------------------------------------------------------------------------------- 1 | import type { Store } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | import type { StoreProps } from './StoreProps'; 4 | 5 | const SCROLL_EVENT_OPTIONS = { 6 | capture: false, 7 | passive: true, 8 | }; 9 | 10 | export const PositionTracker: React.FC<{ 11 | isDocumentChanged: boolean; 12 | store: Store; 13 | }> = ({ isDocumentChanged, store }) => { 14 | const scrollToLatestPosition = () => { 15 | const latestOffset = store.get('offset'); 16 | const getPagesContainer = store.get('getPagesContainer'); 17 | if (!getPagesContainer || !latestOffset) { 18 | return; 19 | } 20 | const pagesEle = getPagesContainer(); 21 | if (pagesEle) { 22 | pagesEle.scrollTop = latestOffset.top; 23 | pagesEle.scrollLeft = latestOffset.left; 24 | } 25 | }; 26 | 27 | const handleScroll = (e: Event) => { 28 | // We will implement in later 29 | const target = e.target; 30 | if (target instanceof HTMLDivElement) { 31 | const top = target.scrollTop; 32 | const left = target.scrollLeft; 33 | store.update('offset', { top, left }); 34 | } 35 | }; 36 | 37 | const handlePagesContainer = () => { 38 | const getPagesContainer = store.get('getPagesContainer'); 39 | if (!getPagesContainer) { 40 | return; 41 | } 42 | 43 | const pagesEle = getPagesContainer(); 44 | pagesEle.addEventListener('scroll', handleScroll, SCROLL_EVENT_OPTIONS); 45 | }; 46 | 47 | React.useLayoutEffect(() => { 48 | if (isDocumentChanged) { 49 | scrollToLatestPosition(); 50 | } 51 | }, [isDocumentChanged]); 52 | 53 | React.useLayoutEffect(() => { 54 | store.subscribe('getPagesContainer', handlePagesContainer); 55 | 56 | return () => { 57 | store.unsubscribe('getPagesContainer', handlePagesContainer); 58 | }; 59 | }, []); 60 | 61 | return <>; 62 | }; 63 | -------------------------------------------------------------------------------- /customize-bookmark-items/CustomizeToggleIconsDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import type { RenderBookmarkItemProps } from '@react-pdf-viewer/bookmark'; 2 | import { Icon, Viewer } from '@react-pdf-viewer/core'; 3 | import { BookmarkIcon, defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface CustomizeToggleIconsDefaultLayoutExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const ExpandIcon = () => ( 14 | 15 | 16 | 17 | ); 18 | 19 | const CollapseIcon = () => ( 20 | 21 | 22 | 23 | ); 24 | 25 | const CustomizeToggleIconsDefaultLayoutExample: React.FC = ({ 26 | fileUrl, 27 | }) => { 28 | const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) => 29 | renderProps.defaultRenderItem( 30 | renderProps.onClickItem, 31 | <> 32 | {renderProps.defaultRenderToggle(, )} 33 | {renderProps.defaultRenderTitle(renderProps.onClickTitle)} 34 | 35 | ); 36 | 37 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 38 | sidebarTabs: (defaultTabs) => [ 39 | defaultTabs[0], 40 | { 41 | content: , 42 | icon: , 43 | title: 'Bookmark', 44 | }, 45 | defaultTabs[2], 46 | ], 47 | }); 48 | 49 | const bookmarkPluginInstance = defaultLayoutPluginInstance.bookmarkPluginInstance; 50 | const { Bookmarks } = bookmarkPluginInstance; 51 | 52 | return ; 53 | }; 54 | 55 | export default CustomizeToggleIconsDefaultLayoutExample; 56 | -------------------------------------------------------------------------------- /selection-mode/SwitchSelectionModeButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { SelectionMode, selectionModePlugin } from '@react-pdf-viewer/selection-mode'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/selection-mode/lib/styles/index.css'; 7 | 8 | interface SwitchSelectionModeButtonsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const SwitchSelectionModeButtonsExample: React.FC = ({ fileUrl }) => { 13 | const selectionModePluginInstance = selectionModePlugin(); 14 | const { SwitchSelectionModeButton } = selectionModePluginInstance; 15 | 16 | return ( 17 |
26 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 |
49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default SwitchSelectionModeButtonsExample; 56 | -------------------------------------------------------------------------------- /preview-a-pdf-file-from-base-64/LoadFromBase64Example.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | 4 | import '@react-pdf-viewer/core/lib/styles/index.css'; 5 | 6 | const LoadFromBase64Example: React.FC<{}> = () => { 7 | const base64 = 8 | 'data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'; 9 | const pdfContentType = 'application/pdf'; 10 | 11 | const base64toBlob = (data: string) => { 12 | // Cut the prefix `data:application/pdf;base64` from the raw base 64 13 | const base64WithoutPrefix = data.substr(`data:${pdfContentType};base64,`.length); 14 | 15 | const bytes = atob(base64WithoutPrefix); 16 | let length = bytes.length; 17 | let out = new Uint8Array(length); 18 | 19 | while (length--) { 20 | out[length] = bytes.charCodeAt(length); 21 | } 22 | 23 | return new Blob([out], { type: pdfContentType }); 24 | }; 25 | 26 | const url = URL.createObjectURL(base64toBlob(base64)); 27 | 28 | return ( 29 |
35 | 36 |
37 | ); 38 | }; 39 | 40 | export default LoadFromBase64Example; 41 | -------------------------------------------------------------------------------- /customize-the-default-toolbar/CustomizeDefaultToolbarExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 4 | import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 8 | 9 | interface CustomizeDefaultToolbarExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const CustomizeDefaultToolbarExample: React.FC = ({ fileUrl }) => { 14 | const toolbarPluginInstance = toolbarPlugin(); 15 | const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance; 16 | 17 | const transform: TransformToolbarSlot = (slot: ToolbarSlot) => { 18 | const { NumberOfPages } = slot; 19 | return Object.assign({}, slot, { 20 | NumberOfPages: () => ( 21 | <> 22 | of 23 | 24 | ), 25 | }); 26 | }; 27 | 28 | return ( 29 |
38 |
47 | {renderDefaultToolbar(transform)} 48 |
49 |
55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default CustomizeDefaultToolbarExample; 62 | -------------------------------------------------------------------------------- /customize-bookmark-items/CustomizeToggleIconsExample.tsx: -------------------------------------------------------------------------------- 1 | import type { RenderBookmarkItemProps } from '@react-pdf-viewer/bookmark'; 2 | import { bookmarkPlugin } from '@react-pdf-viewer/bookmark'; 3 | import { Icon, Viewer } from '@react-pdf-viewer/core'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/bookmark/lib/styles/index.css'; 7 | import '@react-pdf-viewer/core/lib/styles/index.css'; 8 | 9 | interface CustomizeToggleIconsExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const ExpandIcon = () => ( 14 | 15 | 16 | 17 | ); 18 | 19 | const CollapseIcon = () => ( 20 | 21 | 22 | 23 | ); 24 | 25 | const CustomizeToggleIconsExample: React.FC = ({ fileUrl }) => { 26 | const bookmarkPluginInstance = bookmarkPlugin(); 27 | 28 | const { Bookmarks } = bookmarkPluginInstance; 29 | 30 | const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) => 31 | renderProps.defaultRenderItem( 32 | renderProps.onClickItem, 33 | <> 34 | {renderProps.defaultRenderToggle(, )} 35 | {renderProps.defaultRenderTitle(renderProps.onClickTitle)} 36 | 37 | ); 38 | 39 | return ( 40 |
47 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | ); 61 | }; 62 | 63 | export default CustomizeToggleIconsExample; 64 | -------------------------------------------------------------------------------- /toolbar/ToolbarOptionsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { OpenFile, Viewer } from '@react-pdf-viewer/core'; 3 | import { SelectionMode } from '@react-pdf-viewer/selection-mode'; 4 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 8 | 9 | interface ToolbarOptionsExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const ToolbarOptionsExample: React.FC = ({ fileUrl }) => { 14 | const toolbarPluginInstance = toolbarPlugin({ 15 | getFilePlugin: { 16 | fileNameGenerator: (file: OpenFile) => { 17 | // `file.name` is the URL of opened file 18 | const fileName = file.name.substring(file.name.lastIndexOf('/') + 1); 19 | return `a-copy-of-${fileName}`; 20 | }, 21 | }, 22 | searchPlugin: { 23 | keyword: 'PDF', 24 | }, 25 | selectionModePlugin: { 26 | selectionMode: SelectionMode.Hand, 27 | }, 28 | }); 29 | const { Toolbar } = toolbarPluginInstance; 30 | 31 | return ( 32 |
41 |
50 | 51 |
52 |
58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default ToolbarOptionsExample; 65 | -------------------------------------------------------------------------------- /remove-some-parts-from-the-default-toolbar/RemovePartsDefaultToolbarExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 4 | import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 8 | 9 | interface RemovePartsDefaultToolbarExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const RemovePartsDefaultToolbarExample: React.FC = ({ fileUrl }) => { 14 | const toolbarPluginInstance = toolbarPlugin(); 15 | const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance; 16 | 17 | const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({ 18 | ...slot, 19 | Download: () => <>, 20 | DownloadMenuItem: () => <>, 21 | EnterFullScreen: () => <>, 22 | EnterFullScreenMenuItem: () => <>, 23 | SwitchTheme: () => <>, 24 | SwitchThemeMenuItem: () => <>, 25 | }); 26 | 27 | return ( 28 |
37 |
46 | {renderDefaultToolbar(transform)} 47 |
48 |
54 | 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default RemovePartsDefaultToolbarExample; 61 | -------------------------------------------------------------------------------- /get-file/CustomizeDownloadButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { getFilePlugin, RenderDownloadProps } from '@react-pdf-viewer/get-file'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface CustomizeDownloadButtonExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const CustomizeDownloadButtonExample: React.FC = ({ fileUrl }) => { 12 | const getFilePluginInstance = getFilePlugin(); 13 | const { Download } = getFilePluginInstance; 14 | 15 | return ( 16 |
24 |
32 | 33 | {(props: RenderDownloadProps) => ( 34 | 47 | )} 48 | 49 |
50 |
56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default CustomizeDownloadButtonExample; 63 | -------------------------------------------------------------------------------- /open-a-confirmation-modal-when-users-click-a-link/ConfirmationModal.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PrimaryButton, MinimalButton, Modal } from '@react-pdf-viewer/core'; 3 | import type { Store } from '@react-pdf-viewer/core'; 4 | 5 | import StoreProps from './StoreProps'; 6 | 7 | const ConfirmationModal: React.FC<{ 8 | store: Store; 9 | }> = ({ store }) => { 10 | const [target, setTarget] = React.useState(''); 11 | 12 | const handleTargetClicked = (clickedTarget: string) => { 13 | setTarget(clickedTarget); 14 | }; 15 | 16 | const handleCancel = () => { 17 | setTarget(''); 18 | }; 19 | 20 | const handleConfirm = () => { 21 | setTarget(''); 22 | window.open(target, '_blank'); 23 | }; 24 | 25 | const renderContent = () => ( 26 |
27 |
34 |
Are you sure that you want to follow this link
35 | {target}? 36 |
37 |
44 |
45 | No 46 |
47 | Yes 48 |
49 |
50 | ); 51 | 52 | React.useEffect(() => { 53 | store.subscribe('clickedTarget', handleTargetClicked); 54 | 55 | return () => { 56 | store.unsubscribe('clickedTarget', handleTargetClicked); 57 | }; 58 | }, []); 59 | 60 | return ( 61 | target && 62 | ); 63 | }; 64 | 65 | export default ConfirmationModal; 66 | -------------------------------------------------------------------------------- /show-the-custom-page-label-for-the-current-page/CurrentPageLabelExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation'; 4 | import type { RenderCurrentPageLabelProps } from '@react-pdf-viewer/page-navigation'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/page-navigation/lib/styles/index.css'; 8 | 9 | interface CurrentPageLabelExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const CurrentPageLabelExample: React.FC = ({ fileUrl }) => { 14 | const pageNavigationPluginInstance = pageNavigationPlugin(); 15 | const { CurrentPageLabel } = pageNavigationPluginInstance; 16 | 17 | return ( 18 |
26 |
36 | 37 | {(props: RenderCurrentPageLabelProps) => ( 38 | <> 39 | {`${props.currentPage + 1} ${ 40 | props.pageLabel === `${props.currentPage + 1}` ? '' : ` (${props.pageLabel})` 41 | } of ${props.numberOfPages}`} 42 | 43 | )} 44 | 45 |
46 |
52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default CurrentPageLabelExample; 59 | -------------------------------------------------------------------------------- /execute-a-function-when-users-click-a-bookmark-item/ClickBookmarkItemExample.tsx: -------------------------------------------------------------------------------- 1 | import type { RenderBookmarkItemProps } from '@react-pdf-viewer/bookmark'; 2 | import { Icon, Viewer } from '@react-pdf-viewer/core'; 3 | import { BookmarkIcon, defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 8 | 9 | interface ClickBookmarkItemExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const ExpandIcon = () => ( 14 | 15 | 16 | 17 | ); 18 | 19 | const CollapseIcon = () => ( 20 | 21 | 22 | 23 | ); 24 | 25 | const ClickBookmarkItemExample: React.FC = ({ fileUrl }) => { 26 | const toggleBookmarkTab = () => { 27 | toggleTab(1); 28 | }; 29 | 30 | const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) => 31 | renderProps.defaultRenderItem( 32 | renderProps.onClickItem, 33 | <> 34 | {renderProps.defaultRenderToggle(, )} 35 | {renderProps.defaultRenderTitle(() => { 36 | renderProps.onClickTitle(); 37 | toggleBookmarkTab(); 38 | })} 39 | 40 | ); 41 | 42 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 43 | sidebarTabs: (defaultTabs) => [ 44 | defaultTabs[0], 45 | { 46 | content: , 47 | icon: , 48 | title: 'Bookmark', 49 | }, 50 | defaultTabs[2], 51 | ], 52 | }); 53 | 54 | const { toggleTab } = defaultLayoutPluginInstance; 55 | const bookmarkPluginInstance = defaultLayoutPluginInstance.bookmarkPluginInstance; 56 | const { Bookmarks } = bookmarkPluginInstance; 57 | 58 | return ; 59 | }; 60 | 61 | export default ClickBookmarkItemExample; 62 | -------------------------------------------------------------------------------- /customize-the-protected-view/CustomizeProtectedViewExample.tsx: -------------------------------------------------------------------------------- 1 | import type { RenderProtectedViewProps } from '@react-pdf-viewer/core'; 2 | import { PasswordStatus, PrimaryButton, TextBox, Viewer } from '@react-pdf-viewer/core'; 3 | import * as React from 'react'; 4 | 5 | const ProtectedView: React.FC = ({ passwordStatus, verifyPassword }) => { 6 | const [password, setPassword] = React.useState(''); 7 | const submit = (): void => verifyPassword(password); 8 | 9 | return ( 10 |
20 |
25 |
30 | 36 |
37 | {passwordStatus === PasswordStatus.WrongPassword && ( 38 |
44 | The password is invalid. Please try again! 45 |
46 | )} 47 | Submit 48 |
49 |
50 | ); 51 | }; 52 | 53 | interface CustomizeProtectedViewExampleProps { 54 | fileUrl: string; 55 | } 56 | 57 | const CustomizeProtectedViewExample: React.FC = ({ fileUrl }) => { 58 | return } />; 59 | }; 60 | 61 | export default CustomizeProtectedViewExample; 62 | -------------------------------------------------------------------------------- /print/CustomizePrintButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { printPlugin, RenderPrintProps } from '@react-pdf-viewer/print'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/print/lib/styles/index.css'; 7 | 8 | interface CustomizePrintButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizePrintButtonExample: React.FC = ({ fileUrl }) => { 13 | const printPluginInstance = printPlugin(); 14 | const { Print } = printPluginInstance; 15 | 16 | return ( 17 |
25 |
34 | 35 | {(props: RenderPrintProps) => ( 36 | 49 | )} 50 | 51 |
52 |
58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default CustomizePrintButtonExample; 65 | -------------------------------------------------------------------------------- /full-screen/CustomizeFullScreenButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { fullScreenPlugin, RenderEnterFullScreenProps } from '@react-pdf-viewer/full-screen'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/full-screen/lib/styles/index.css'; 7 | 8 | interface CustomizeFullScreenButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizeFullScreenButtonExample: React.FC = ({ fileUrl }) => { 13 | const fullScreenPluginInstance = fullScreenPlugin(); 14 | const { EnterFullScreen } = fullScreenPluginInstance; 15 | 16 | return ( 17 |
25 |
34 | 35 | {(props: RenderEnterFullScreenProps) => ( 36 | 49 | )} 50 | 51 |
52 |
58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default CustomizeFullScreenButtonExample; 65 | -------------------------------------------------------------------------------- /theme/SwitchThemeButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ThemeContext, Viewer } from '@react-pdf-viewer/core'; 3 | import { themePlugin } from '@react-pdf-viewer/theme'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface SwitchThemeButtonExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const SwitchThemeButtonExample: React.FC = ({ fileUrl }) => { 12 | const themePluginInstance = themePlugin(); 13 | const { SwitchThemeButton } = themePluginInstance; 14 | 15 | const [currentTheme, setCurrentTheme] = React.useState('light'); 16 | const themeContext = { currentTheme, setCurrentTheme }; 17 | 18 | return ( 19 | 20 |
31 |
42 | 43 |
44 |
50 | 56 |
57 |
58 | 59 | ); 60 | }; 61 | 62 | export default SwitchThemeButtonExample; 63 | -------------------------------------------------------------------------------- /search/CustomizeSearchPopoverButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { RenderShowSearchPopoverProps, searchPlugin } from '@react-pdf-viewer/search'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/search/lib/styles/index.css'; 7 | 8 | interface CustomizeSearchPopoverButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizeSearchPopoverButtonExample: React.FC = ({ fileUrl }) => { 13 | const searchPluginInstance = searchPlugin(); 14 | const { ShowSearchPopover } = searchPluginInstance; 15 | 16 | return ( 17 |
26 |
35 | 36 | {(props: RenderShowSearchPopoverProps) => ( 37 | 50 | )} 51 | 52 |
53 |
59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default CustomizeSearchPopoverButtonExample; 66 | -------------------------------------------------------------------------------- /use-a-different-language/LocalizationExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { LocalizationContext, LocalizationMap, ThemeContext, Viewer } from '@react-pdf-viewer/core'; 3 | import { toolbarPlugin } from '@react-pdf-viewer/toolbar'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/toolbar/lib/styles/index.css'; 7 | 8 | import vi_VN from './vi_VN.json'; 9 | 10 | const LocalizationExample: React.FC<{}> = () => { 11 | const toolbarPluginInstance = toolbarPlugin(); 12 | const { Toolbar } = toolbarPluginInstance; 13 | 14 | const [currentTheme, setCurrentTheme] = React.useState('light'); 15 | const [l10n, setL10n] = React.useState(vi_VN as any as LocalizationMap); 16 | 17 | const localizationContext = { l10n, setL10n }; 18 | const themeContext = { currentTheme, setCurrentTheme }; 19 | 20 | return ( 21 | 22 | 23 |
32 |
41 | 42 |
43 |
49 | 50 |
51 |
52 | 53 | 54 | ); 55 | }; 56 | 57 | export default LocalizationExample; 58 | -------------------------------------------------------------------------------- /set-the-target-pages-when-printing-a-document/SetPagesExample.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import type { RenderPrintProps } from '@react-pdf-viewer/print'; 3 | import { getEvenPagesNumbers, printPlugin } from '@react-pdf-viewer/print'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/print/lib/styles/index.css'; 8 | 9 | interface SetPagesExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const SetPagesExample: React.FC = ({ fileUrl }) => { 14 | const printPluginInstance = printPlugin({ 15 | setPages: getEvenPagesNumbers, 16 | }); 17 | const { Print } = printPluginInstance; 18 | 19 | return ( 20 |
29 |
38 | 39 | {(props: RenderPrintProps) => ( 40 | 53 | )} 54 | 55 |
56 |
62 | 63 |
64 |
65 | ); 66 | }; 67 | 68 | export default SetPagesExample; 69 | -------------------------------------------------------------------------------- /page-navigation/PageNavigationButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/page-navigation/lib/styles/index.css'; 7 | 8 | interface PageNavigationButtonsExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const PageNavigationButtonsExample: React.FC = ({ fileUrl }) => { 13 | const pageNavigationPluginInstance = pageNavigationPlugin(); 14 | const { CurrentPageInput, GoToFirstPageButton, GoToLastPageButton, GoToNextPageButton, GoToPreviousPage } = 15 | pageNavigationPluginInstance; 16 | 17 | return ( 18 |
27 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 |
59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default PageNavigationButtonsExample; 66 | -------------------------------------------------------------------------------- /use-the-rotate-page-component-to-rotate-a-particular-page/RotatePageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PrimaryButton, RotateDirection, Viewer } from '@react-pdf-viewer/core'; 3 | import { rotatePlugin } from '@react-pdf-viewer/rotate'; 4 | 5 | interface RotatePageExampleProps { 6 | fileUrl: string; 7 | } 8 | 9 | const RotatePageExample: React.FC = ({ fileUrl }) => { 10 | const rotatePluginInstance = rotatePlugin(); 11 | const { RotatePage } = rotatePluginInstance; 12 | 13 | return ( 14 |
23 |
33 |
34 | 35 | {(props) => ( 36 | props.onRotatePage(0, RotateDirection.Forward)}> 37 | Rotate the first page forward 38 | 39 | )} 40 | 41 |
42 |
43 | 44 | {(props) => ( 45 | props.onRotatePage(0, RotateDirection.Backward)}> 46 | Rotate the first page backward 47 | 48 | )} 49 | 50 |
51 |
52 |
58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default RotatePageExample; 65 | -------------------------------------------------------------------------------- /properties/CustomizePropertiesButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { propertiesPlugin, RenderShowPropertiesProps } from '@react-pdf-viewer/properties'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/properties/lib/styles/index.css'; 7 | 8 | interface CustomizePropertiesButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizePropertiesButtonExample: React.FC = ({ fileUrl }) => { 13 | const propertiesPluginInstance = propertiesPlugin(); 14 | const { ShowProperties } = propertiesPluginInstance; 15 | 16 | return ( 17 |
26 |
36 | 37 | {(props: RenderShowPropertiesProps) => ( 38 | 51 | )} 52 | 53 |
54 |
60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default CustomizePropertiesButtonExample; 67 | -------------------------------------------------------------------------------- /customize-the-progress-bar-when-preparing-pages-to-print/CustomizeProgressBarDefaultLayoutExample.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Spinner, Viewer } from '@react-pdf-viewer/core'; 2 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; 3 | import * as React from 'react'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | interface CustomizeProgressBarDefaultLayoutExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizeProgressBarDefaultLayoutExample: React.FC = ({ 13 | fileUrl, 14 | }) => { 15 | const renderProgressBar = React.useCallback( 16 | (numLoadedPages: number, numPages: number, onCancel: () => void) => ( 17 |
31 |
43 |
44 | Preparing {numLoadedPages}/{numPages} pages ... 45 |
46 |
47 | 48 |
49 | 50 |
51 |
52 | ), 53 | [] 54 | ); 55 | 56 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 57 | toolbarPlugin: { 58 | printPlugin: { 59 | renderProgressBar, 60 | }, 61 | }, 62 | }); 63 | 64 | return ; 65 | }; 66 | 67 | export default CustomizeProgressBarDefaultLayoutExample; 68 | -------------------------------------------------------------------------------- /add-buttons-to-each-page-for-rotating-the-target-page/RotateSinglePageExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MinimalButton, Position, RotateDirection, Tooltip, Viewer } from '@react-pdf-viewer/core'; 3 | import { RotateBackwardIcon, RotateForwardIcon } from '@react-pdf-viewer/rotate'; 4 | import type { RenderPage, RenderPageProps } from '@react-pdf-viewer/core'; 5 | 6 | const TOOLTIP_OFFSET = { left: 0, top: 8 }; 7 | 8 | interface RotateSinglePageExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const RotateSinglePageExample: React.FC = ({ fileUrl }) => { 13 | const renderPage: RenderPage = (props: RenderPageProps) => ( 14 | <> 15 | {props.canvasLayer.children} 16 |
26 |
34 | props.onRotatePage(RotateDirection.Forward)}> 38 | 39 | 40 | } 41 | content={() => 'Rotate clockwise'} 42 | offset={TOOLTIP_OFFSET} 43 | /> 44 | props.onRotatePage(RotateDirection.Backward)}> 48 | 49 | 50 | } 51 | content={() => 'Rotate counterclockwise'} 52 | offset={TOOLTIP_OFFSET} 53 | /> 54 |
55 |
56 | {props.annotationLayer.children} 57 | {props.textLayer.children} 58 | 59 | ); 60 | 61 | return ; 62 | }; 63 | 64 | export default RotateSinglePageExample; 65 | -------------------------------------------------------------------------------- /preview-a-document-inside-a-modal/ModalExample.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Viewer } from '@react-pdf-viewer/core'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface ModalExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const ModalExample: React.FC = ({ fileUrl }) => { 12 | const [shown, setShown] = useState(false); 13 | 14 | const modalBody = () => ( 15 |
34 |
43 |
sample-file-name.pdf
44 | 57 |
58 |
64 | 65 |
66 |
67 | ); 68 | 69 | return ( 70 | <> 71 | 84 | {shown && ReactDOM.createPortal(modalBody(), document.body)} 85 | 86 | ); 87 | }; 88 | 89 | export default ModalExample; 90 | -------------------------------------------------------------------------------- /scroll-mode/SwitchScrollModeButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ScrollMode, Viewer } from '@react-pdf-viewer/core'; 3 | import { scrollModePlugin } from '@react-pdf-viewer/scroll-mode'; 4 | import { zoomPlugin } from '@react-pdf-viewer/zoom'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/zoom/lib/styles/index.css'; 8 | 9 | interface SwitchScrollModeButtonsExampleProps { 10 | fileUrl: string; 11 | } 12 | 13 | const SwitchScrollModeButtonsExample: React.FC = ({ fileUrl }) => { 14 | const scrollModePluginInstance = scrollModePlugin(); 15 | const zoomPluginInstance = zoomPlugin(); 16 | 17 | const { SwitchScrollModeButton } = scrollModePluginInstance; 18 | const { CurrentScale, ZoomInButton, ZoomOutButton } = zoomPluginInstance; 19 | 20 | return ( 21 |
30 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 |
64 | 69 |
70 |
71 | ); 72 | }; 73 | 74 | export default SwitchScrollModeButtonsExample; 75 | -------------------------------------------------------------------------------- /open/CustomizeOpenButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { openPlugin, RenderOpenProps } from '@react-pdf-viewer/open'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/open/lib/styles/index.css'; 7 | 8 | interface CustomizeOpenButtonExampleProps { 9 | fileUrl: string; 10 | } 11 | 12 | const CustomizeOpenButtonExample: React.FC = ({ fileUrl }) => { 13 | const openPluginInstance = openPlugin(); 14 | const { Open } = openPluginInstance; 15 | 16 | return ( 17 |
25 |
34 | 35 | {(props: RenderOpenProps) => ( 36 |
47 | props.onClick(e)} 50 | style={{ 51 | bottom: 0, 52 | cursor: 'pointer', 53 | height: '100%', 54 | left: 0, 55 | opacity: 0, 56 | position: 'absolute', 57 | right: 0, 58 | top: 0, 59 | width: '100%', 60 | }} 61 | /> 62 | Open file 63 |
64 | )} 65 | 66 |
67 |
73 | 74 |
75 |
76 | ); 77 | }; 78 | 79 | export default CustomizeOpenButtonExample; 80 | -------------------------------------------------------------------------------- /magazine/MagazineExample.tsx: -------------------------------------------------------------------------------- 1 | import { MinimalButton, ScrollMode, SpecialZoomLevel, Viewer, ViewMode } from '@react-pdf-viewer/core'; 2 | import { NextIcon, pageNavigationPlugin, PreviousIcon } from '@react-pdf-viewer/page-navigation'; 3 | import { ThumbnailDirection, thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 4 | import * as React from 'react'; 5 | 6 | import '@react-pdf-viewer/core/lib/styles/index.css'; 7 | import '@react-pdf-viewer/page-navigation/lib/styles/index.css'; 8 | import '@react-pdf-viewer/thumbnail/lib/styles/index.css'; 9 | 10 | interface MagazineExampleProps { 11 | fileUrl: string; 12 | } 13 | 14 | const MagazineExample: React.FC = ({ fileUrl }) => { 15 | const pageNavigationPluginInstance = pageNavigationPlugin(); 16 | const { jumpToNextPage, jumpToPreviousPage } = pageNavigationPluginInstance; 17 | 18 | const thumbnailPluginInstance = thumbnailPlugin(); 19 | const { Thumbnails } = thumbnailPluginInstance; 20 | 21 | return ( 22 |
29 |
36 |
45 | 46 | 47 | 48 |
49 | 56 |
65 | 66 | 67 | 68 |
69 |
70 |
76 | 77 |
78 |
79 | ); 80 | }; 81 | 82 | export default MagazineExample; 83 | -------------------------------------------------------------------------------- /locale-switcher/vi_VN.json: -------------------------------------------------------------------------------- 1 | { 2 | "attachment": { 3 | "clickToDownload": "Nhấn vào để tải về", 4 | "noAttachment": "Không có tập tin đính kèm nào" 5 | }, 6 | "bookmark": { 7 | "noBookmark": "Không có đánh dấu nào" 8 | }, 9 | "core": { 10 | "askingPassword": { 11 | "requirePasswordToOpen": "Tập tin yêu cầu mật khẩu để mở", 12 | "submit": "Gửi đi" 13 | }, 14 | "wrongPassword": { 15 | "submit": "Gửi đi", 16 | "tryAgain": "Mật khẩu không đúng. Xin thử lại" 17 | } 18 | }, 19 | "defaultLayout": { 20 | "attachment": "Đính kèm", 21 | "bookmark": "Đánh dấu", 22 | "thumbnail": "Hình nhỏ" 23 | }, 24 | "download": { 25 | "download": "Tải về" 26 | }, 27 | "drop": { 28 | "dragDropFile": "Kéo và thả tập tin PDF ở đây" 29 | }, 30 | "fullScreen": { 31 | "enterFullScreen": "Toàn màn hình" 32 | }, 33 | "localeSwitcher": { 34 | "switchLocale": "Chuyển ngôn ngữ" 35 | }, 36 | "open": { 37 | "openFile": "Mở tập tin" 38 | }, 39 | "pageNavigation": { 40 | "goToFirstPage": "Trang đầu", 41 | "goToLastPage": "Trang cuối", 42 | "goToNextPage": "Trang kế", 43 | "goToPreviousPage": "Trang trước" 44 | }, 45 | "print": { 46 | "cancel": "Huỷ", 47 | "preparingDocument": "Chuẩn bị tài liệu ...", 48 | "print": "In" 49 | }, 50 | "properties": { 51 | "author": "Tác giả", 52 | "close": "Đóng", 53 | "creationDate": "Ngày tạo", 54 | "creator": "Người tạo", 55 | "fileName": "Tên tệp tin", 56 | "fileSize": "Kích thước tệp tin", 57 | "keywords": "Từ khoá", 58 | "modificationDate": "Ngày chỉnh sửa", 59 | "pageCount": "Số trang", 60 | "pdfProducer": "Phần mềm tạo PDF", 61 | "pdfVersion": "Phiên bản PDF", 62 | "showProperties": "Thông tin tập tin", 63 | "subject": "Chủ đề", 64 | "title": "Tiêu đề" 65 | }, 66 | "rotate": { 67 | "rotateBackward": "Xoay ngược chiều kim đồng hồ", 68 | "rotateForward": "Xoay chiều kim đồng hồ" 69 | }, 70 | "scrollMode": { 71 | "horizontalScrolling": "Cuộn ngang", 72 | "verticalScrolling": "Cuộn dọc", 73 | "wrappedScrolling": "Cuộn lưới" 74 | }, 75 | "search": { 76 | "close": "Đóng", 77 | "enterToSearch": "Nhấn Enter để tìm", 78 | "matchCase": "Giống chữ hoa thường", 79 | "nextMatch": "Kết quả tiếp theo", 80 | "previousMatch": "Kết quả trước", 81 | "search": "Tìm kiếm", 82 | "wholeWords": "Toàn bộ từ" 83 | }, 84 | "selectionMode": { 85 | "handTool": "Cầm tay", 86 | "textSelectionTool": "Chọn văn bản" 87 | }, 88 | "theme": { 89 | "switchDarkTheme": "Giao diện tối", 90 | "switchLightTheme": "Giao diện sáng" 91 | }, 92 | "toolbar": { 93 | "moreActions": "Nhiều tác vụ khác" 94 | }, 95 | "zoom": { 96 | "actualSize": "Kích thước thực sự", 97 | "pageFit": "Vừa trang", 98 | "pageWidth": "Vừa chiều rộng", 99 | "zoomIn": "Phóng to", 100 | "zoomOut": "Thu nhỏ" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /use-a-different-language/vi_VN.json: -------------------------------------------------------------------------------- 1 | { 2 | "attachment": { 3 | "clickToDownload": "Nhấn vào để tải về", 4 | "noAttachment": "Không có tập tin đính kèm nào" 5 | }, 6 | "bookmark": { 7 | "noBookmark": "Không có đánh dấu nào" 8 | }, 9 | "core": { 10 | "askingPassword": { 11 | "requirePasswordToOpen": "Tập tin yêu cầu mật khẩu để mở", 12 | "submit": "Gửi đi" 13 | }, 14 | "wrongPassword": { 15 | "submit": "Gửi đi", 16 | "tryAgain": "Mật khẩu không đúng. Xin thử lại" 17 | } 18 | }, 19 | "defaultLayout": { 20 | "attachment": "Đính kèm", 21 | "bookmark": "Đánh dấu", 22 | "thumbnail": "Hình nhỏ" 23 | }, 24 | "download": { 25 | "download": "Tải về" 26 | }, 27 | "drop": { 28 | "dragDropFile": "Kéo và thả tập tin PDF ở đây" 29 | }, 30 | "fullScreen": { 31 | "enterFullScreen": "Toàn màn hình" 32 | }, 33 | "localeSwitcher": { 34 | "switchLocale": "Chuyển ngôn ngữ" 35 | }, 36 | "open": { 37 | "openFile": "Mở tập tin" 38 | }, 39 | "pageNavigation": { 40 | "goToFirstPage": "Trang đầu", 41 | "goToLastPage": "Trang cuối", 42 | "goToNextPage": "Trang kế", 43 | "goToPreviousPage": "Trang trước" 44 | }, 45 | "print": { 46 | "cancel": "Huỷ", 47 | "preparingDocument": "Chuẩn bị tài liệu ...", 48 | "print": "In" 49 | }, 50 | "properties": { 51 | "author": "Tác giả", 52 | "close": "Đóng", 53 | "creationDate": "Ngày tạo", 54 | "creator": "Người tạo", 55 | "fileName": "Tên tệp tin", 56 | "fileSize": "Kích thước tệp tin", 57 | "keywords": "Từ khoá", 58 | "modificationDate": "Ngày chỉnh sửa", 59 | "pageCount": "Số trang", 60 | "pdfProducer": "Phần mềm tạo PDF", 61 | "pdfVersion": "Phiên bản PDF", 62 | "showProperties": "Thông tin tập tin", 63 | "subject": "Chủ đề", 64 | "title": "Tiêu đề" 65 | }, 66 | "rotate": { 67 | "rotateBackward": "Xoay ngược chiều kim đồng hồ", 68 | "rotateForward": "Xoay chiều kim đồng hồ" 69 | }, 70 | "scrollMode": { 71 | "horizontalScrolling": "Cuộn ngang", 72 | "verticalScrolling": "Cuộn dọc", 73 | "wrappedScrolling": "Cuộn lưới" 74 | }, 75 | "search": { 76 | "close": "Đóng", 77 | "enterToSearch": "Nhấn Enter để tìm", 78 | "matchCase": "Giống chữ hoa thường", 79 | "nextMatch": "Kết quả tiếp theo", 80 | "previousMatch": "Kết quả trước", 81 | "search": "Tìm kiếm", 82 | "wholeWords": "Toàn bộ từ" 83 | }, 84 | "selectionMode": { 85 | "handTool": "Cầm tay", 86 | "textSelectionTool": "Chọn văn bản" 87 | }, 88 | "theme": { 89 | "switchDarkTheme": "Giao diện tối", 90 | "switchLightTheme": "Giao diện sáng" 91 | }, 92 | "toolbar": { 93 | "moreActions": "Nhiều tác vụ khác" 94 | }, 95 | "zoom": { 96 | "actualSize": "Kích thước thực sự", 97 | "pageFit": "Vừa trang", 98 | "pageWidth": "Vừa chiều rộng", 99 | "zoomIn": "Phóng to", 100 | "zoomOut": "Thu nhỏ" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /customize-the-progress-bar-when-preparing-pages-to-print/CustomizeProgressBarExample.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Spinner, Viewer } from '@react-pdf-viewer/core'; 2 | import type { RenderPrintProps } from '@react-pdf-viewer/print'; 3 | import { printPlugin } from '@react-pdf-viewer/print'; 4 | import * as React from 'react'; 5 | 6 | interface CustomizeProgressBarExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const CustomizeProgressBarExample: React.FC = ({ fileUrl }) => { 11 | const renderProgressBar = React.useCallback( 12 | (numLoadedPages: number, numPages: number, onCancel: () => void) => ( 13 |
27 |
39 |
40 | Preparing {numLoadedPages}/{numPages} pages ... 41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 | ), 49 | [] 50 | ); 51 | 52 | const printPluginInstance = printPlugin({ 53 | renderProgressBar, 54 | }); 55 | const { Print } = printPluginInstance; 56 | 57 | return ( 58 |
67 |
75 | {(props: RenderPrintProps) => } 76 |
77 |
83 | 84 |
85 |
86 | ); 87 | }; 88 | 89 | export default CustomizeProgressBarExample; 90 | -------------------------------------------------------------------------------- /default-layout/ToolbarSlotsExample.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from 'react'; 2 | import { Viewer } from '@react-pdf-viewer/core'; 3 | import { defaultLayoutPlugin, ToolbarProps, ToolbarSlot } from '@react-pdf-viewer/default-layout'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 7 | 8 | const ToolbarSlotsExample: React.FC<{}> = () => { 9 | const renderToolbar = (Toolbar: (props: ToolbarProps) => ReactElement) => ( 10 | 11 | {(slots: ToolbarSlot) => { 12 | const { 13 | CurrentPageInput, 14 | Download, 15 | EnterFullScreen, 16 | GoToNextPage, 17 | GoToPreviousPage, 18 | NumberOfPages, 19 | Print, 20 | ShowSearchPopover, 21 | Zoom, 22 | ZoomIn, 23 | ZoomOut, 24 | } = slots; 25 | return ( 26 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | / 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 | 65 |
66 |
67 | ); 68 | }} 69 | 70 | ); 71 | 72 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 73 | renderToolbar, 74 | }); 75 | 76 | return ; 77 | }; 78 | 79 | export default ToolbarSlotsExample; 80 | -------------------------------------------------------------------------------- /use-a-different-language/en_US.json: -------------------------------------------------------------------------------- 1 | { 2 | "attachment": { 3 | "clickToDownload": "Click to download", 4 | "noAttachment": "There is no attachment" 5 | }, 6 | "bookmark": { 7 | "noBookmark": "There is no bookmark" 8 | }, 9 | "core": { 10 | "askingPassword": { 11 | "requirePasswordToOpen": "This document requires a password to open", 12 | "submit": "Submit" 13 | }, 14 | "wrongPassword": { 15 | "submit": "Submit", 16 | "tryAgain": "The password is wrong. Please try again" 17 | } 18 | }, 19 | "defaultLayout": { 20 | "attachment": "Attachment", 21 | "bookmark": "Bookmark", 22 | "thumbnail": "Thumbnail" 23 | }, 24 | "download": { 25 | "download": "Download" 26 | }, 27 | "drop": { 28 | "dragDropFile": "Drag and drop a PDF document here" 29 | }, 30 | "fullScreen": { 31 | "enterFullScreen": "Full screen" 32 | }, 33 | "localeSwitcher": { 34 | "switchLocale": "Switch locale" 35 | }, 36 | "open": { 37 | "openFile": "Open file" 38 | }, 39 | "pageNavigation": { 40 | "goToFirstPage": "First page", 41 | "goToLastPage": "Last page", 42 | "goToNextPage": "Next page", 43 | "goToPreviousPage": "Previous page" 44 | }, 45 | "print": { 46 | "cancel": "Cancel", 47 | "preparingDocument": "Preparing document ...", 48 | "print": "Print" 49 | }, 50 | "properties": { 51 | "author": "Author", 52 | "close": "Close", 53 | "creationDate": "Creation date", 54 | "creator": "Creator", 55 | "fileName": "File name", 56 | "fileSize": "File size", 57 | "keywords": "Keywords", 58 | "modificationDate": "Modification date", 59 | "pageCount": "Page count", 60 | "pdfProducer": "PDF producer", 61 | "pdfVersion": "PDF version", 62 | "showProperties": "Show properties", 63 | "subject": "Subject", 64 | "title": "Title" 65 | }, 66 | "rotate": { 67 | "rotateBackward": "Rotate counterclockwise", 68 | "rotateForward": "Rotate clockwise" 69 | }, 70 | "scrollMode": { 71 | "horizontalScrolling": "Horizontal scrolling", 72 | "verticalScrolling": "Vertical scrolling", 73 | "wrappedScrolling": "Wrapped scrolling" 74 | }, 75 | "search": { 76 | "close": "Close", 77 | "enterToSearch": "Enter to search", 78 | "matchCase": "Match case", 79 | "nextMatch": "Next match", 80 | "previousMatch": "Previous match", 81 | "search": "Search", 82 | "wholeWords": "Whole words" 83 | }, 84 | "selectionMode": { 85 | "handTool": "Hand tool", 86 | "textSelectionTool": "Text selection tool" 87 | }, 88 | "theme": { 89 | "switchDarkTheme": "Switch to the dark theme", 90 | "switchLightTheme": "Switch to the light theme" 91 | }, 92 | "toolbar": { 93 | "moreActions": "More actions" 94 | }, 95 | "zoom": { 96 | "actualSize": "Actual size", 97 | "pageFit": "Page fit", 98 | "pageWidth": "Page width", 99 | "zoomIn": "Zoom in", 100 | "zoomOut": "Zoom out" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /use-the-rotate-page-component-to-rotate-a-particular-page/RotatePageWithThumbnailsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PrimaryButton, RotateDirection, Viewer } from '@react-pdf-viewer/core'; 3 | import { rotatePlugin } from '@react-pdf-viewer/rotate'; 4 | import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail'; 5 | 6 | interface RotatePageWithThumbnailsExampleProps { 7 | fileUrl: string; 8 | } 9 | 10 | const RotatePageWithThumbnailsExample: React.FC = ({ fileUrl }) => { 11 | const rotatePluginInstance = rotatePlugin(); 12 | const { RotatePage } = rotatePluginInstance; 13 | 14 | const thumbnailPluginInstance = thumbnailPlugin(); 15 | const { Thumbnails } = thumbnailPluginInstance; 16 | 17 | return ( 18 |
27 |
37 |
38 | 39 | {(props) => ( 40 | props.onRotatePage(0, RotateDirection.Forward)}> 41 | Rotate the first page forward 42 | 43 | )} 44 | 45 |
46 |
47 | 48 | {(props) => ( 49 | props.onRotatePage(0, RotateDirection.Backward)}> 50 | Rotate the first page backward 51 | 52 | )} 53 | 54 |
55 |
56 |
63 |
69 | 70 |
71 |
77 | 82 |
83 |
84 |
85 | ); 86 | }; 87 | 88 | export default RotatePageWithThumbnailsExample; 89 | -------------------------------------------------------------------------------- /rotate/CustomizeRotateButtonsExample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RotateDirection, Viewer } from '@react-pdf-viewer/core'; 3 | import { RenderRotateProps, rotatePlugin } from '@react-pdf-viewer/rotate'; 4 | 5 | import '@react-pdf-viewer/core/lib/styles/index.css'; 6 | 7 | interface CustomizeRotateButtonsExampleProps { 8 | fileUrl: string; 9 | } 10 | 11 | const CustomizeRotateButtonsExample: React.FC = ({ fileUrl }) => { 12 | const rotatePluginInstance = rotatePlugin(); 13 | const { Rotate } = rotatePluginInstance; 14 | 15 | return ( 16 |
24 |
34 |
35 | 36 | {(props: RenderRotateProps) => ( 37 | 50 | )} 51 | 52 |
53 |
54 | 55 | {(props: RenderRotateProps) => ( 56 | 69 | )} 70 | 71 |
72 |
73 |
79 | 80 |
81 |
82 | ); 83 | }; 84 | 85 | export default CustomizeRotateButtonsExample; 86 | --------------------------------------------------------------------------------