├── demo ├── nextjs │ ├── public │ │ └── .gitignore │ ├── next-env.d.ts │ ├── pages │ │ ├── _document.tsx │ │ ├── core-initial-page │ │ │ └── index.tsx │ │ ├── core-initial-rotation │ │ │ └── index.tsx │ │ ├── core-initial-page-different-dimensions │ │ │ └── index.tsx │ │ ├── core │ │ │ └── index.tsx │ │ ├── core-different-dimensions │ │ │ └── index.tsx │ │ ├── search-focus-keyword │ │ │ └── index.tsx │ │ ├── default-layout-different-dimensions │ │ │ └── index.tsx │ │ ├── default-layout-rtl │ │ │ └── index.tsx │ │ ├── default-layout │ │ │ └── index.tsx │ │ ├── default-layout-initial-page │ │ │ └── index.tsx │ │ ├── core-initial-page-dual-page │ │ │ └── index.tsx │ │ └── default-layout-initial-tab │ │ │ └── index.tsx │ ├── tsconfig.json │ └── package.json └── webpack │ ├── .gitignore │ ├── .babelrc │ ├── tsconfig.json │ └── src │ ├── styles.css │ ├── index.tsx │ └── index.html ├── @types └── extensions.d.ts ├── changelogs ├── v1.0.0.md ├── v1.0.2.md ├── v2.2.1.md ├── v1.1.0.md ├── v3.3.2.md ├── v1.2.1.md ├── v2.10.1.md ├── v2.4.1.md ├── v2.9.1.md ├── v3.1.1.md ├── v2.6.1.md ├── v2.7.1.md ├── v2.8.0.md ├── v3.3.3.md ├── v3.1.2.md ├── v2.3.2.md ├── v2.4.3.md ├── v3.3.1.md └── v1.3.0.md ├── packages ├── core │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── loader │ │ │ ├── LoadingStatus.ts │ │ │ ├── LoadingState.ts │ │ │ ├── FailureState.ts │ │ │ ├── CompletedState.ts │ │ │ ├── LoadError.ts │ │ │ └── AskForPasswordState.ts │ │ ├── utils │ │ │ ├── uniqueId.ts │ │ │ ├── easeOutQuart.ts │ │ │ ├── clamp.ts │ │ │ ├── isMac.ts │ │ │ ├── indexOfMax.ts │ │ │ ├── randomNumber.ts │ │ │ ├── getFileExt.ts │ │ │ ├── isDarkMode.ts │ │ │ ├── chunk.ts │ │ │ ├── getFileName.ts │ │ │ ├── maxByKey.ts │ │ │ ├── roundToDivide.ts │ │ │ ├── classNames.ts │ │ │ ├── mergeRefs.ts │ │ │ └── isSameUrl.ts │ │ ├── styles │ │ │ ├── skeleton.module.css │ │ │ ├── separator.module.css │ │ │ ├── menuDivider.module.css │ │ │ ├── popoverOverlay.module.css │ │ │ ├── canvasLayer.module.css │ │ │ ├── menu.module.css │ │ │ ├── pageSizeCalculator.module.css │ │ │ ├── annotationLayer.module.css │ │ │ ├── icon.module.css │ │ │ ├── annotation.module.css │ │ │ ├── viewer.module.css │ │ │ ├── primaryButton.module.css │ │ │ ├── progressBar.module.css │ │ │ ├── tooltipBody.module.css │ │ │ └── button.module.css │ │ ├── types │ │ │ ├── Offset.ts │ │ │ ├── Rect.ts │ │ │ ├── CharacterMap.ts │ │ │ ├── LocalizationMap.ts │ │ │ ├── VisibilityChanged.ts │ │ │ ├── DocumentAskPasswordEvent.ts │ │ │ ├── PageSize.ts │ │ │ ├── Toggle.ts │ │ │ ├── OpenFile.ts │ │ │ ├── ZoomEvent.ts │ │ │ ├── PageChangeEvent.ts │ │ │ ├── DocumentLoadEvent.ts │ │ │ ├── RotateEvent.ts │ │ │ ├── SetRenderRange.ts │ │ │ ├── RotatePageEvent.ts │ │ │ ├── Slot.ts │ │ │ ├── RenderProtectedView.ts │ │ │ ├── Destination.ts │ │ │ └── PdfJsApiProvider.ts │ │ ├── structs │ │ │ ├── LayerRenderStatus.ts │ │ │ ├── RotateDirection.ts │ │ │ ├── ToggleStatus.ts │ │ │ ├── PasswordStatus.ts │ │ │ ├── ScrollDirection.ts │ │ │ ├── SpecialZoomLevel.ts │ │ │ ├── ViewMode.ts │ │ │ ├── ScrollMode.ts │ │ │ ├── Breakpoint.ts │ │ │ ├── FullScreenMode.ts │ │ │ ├── PageMode.ts │ │ │ └── Position.ts │ │ ├── localization │ │ │ ├── en_US.json │ │ │ └── LocalizationContext.ts │ │ ├── annotations │ │ │ ├── AnnotationBorderStyleType.ts │ │ │ ├── getTitle.ts │ │ │ ├── getContents.ts │ │ │ └── AnnotationType.ts │ │ ├── virtualizer │ │ │ ├── VirtualItem.ts │ │ │ └── ItemMeasurement.ts │ │ ├── hooks │ │ │ ├── useIsomorphicLayoutEffect.ts │ │ │ ├── usePrevious.ts │ │ │ ├── useIsMounted.ts │ │ │ ├── useLockScroll.ts │ │ │ └── useRunOnce.ts │ │ ├── components │ │ │ ├── Separator.tsx │ │ │ └── MenuDivider.tsx │ │ ├── responsive │ │ │ └── BreakpointContext.ts │ │ ├── icons │ │ │ ├── CheckIcon.tsx │ │ │ ├── TriangleIcon.tsx │ │ │ ├── ParagraphIcon.tsx │ │ │ ├── KeyIcon.tsx │ │ │ ├── NoteIcon.tsx │ │ │ ├── ResizeIcon.tsx │ │ │ └── CommentIcon.tsx │ │ ├── vendors │ │ │ └── PdfJsApiContext.ts │ │ ├── portal │ │ │ └── StackContext.ts │ │ └── theme │ │ │ └── ThemeContext.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── drop │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── open │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── StoreProps.ts │ │ │ └── RenderOpenProps.ts │ │ ├── index.ts │ │ ├── OpenFileIcon.tsx │ │ └── styles │ │ │ └── openInput.module.css │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── print │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── RenderPrintProps.ts │ │ │ └── StoreProps.ts │ │ ├── styles │ │ │ ├── checkPrintPermission.module.css │ │ │ └── printZone.module.css │ │ ├── isRunningInJest.ts │ │ ├── structs │ │ │ └── PrintStatus.ts │ │ ├── getAllPagesNumbers.ts │ │ ├── getEvenPagesNumbers.ts │ │ ├── getOddPagesNumbers.ts │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── rotate │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── RenderRotateProps.ts │ │ │ ├── RenderRotatePageProps.ts │ │ │ └── StoreProps.ts │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── search │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── RenderShowSearchPopoverProps.ts │ │ │ ├── OnHighlightKeyword.ts │ │ │ ├── SingleKeyword.ts │ │ │ ├── NormalizedKeyword.ts │ │ │ ├── FlagKeyword.ts │ │ │ ├── MatchPosition.ts │ │ │ ├── SearchTargetPage.ts │ │ │ └── Match.ts │ │ ├── constants.ts │ │ ├── wrap.ts │ │ ├── NextIcon.tsx │ │ ├── PreviousIcon.tsx │ │ ├── getCssProperties.ts │ │ ├── SearchIcon.tsx │ │ ├── calculateOffset.ts │ │ └── styles │ │ │ └── highlight.module.css │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── theme │ ├── .npmignore │ ├── tsconfig.build.json │ ├── dist │ │ └── index.js │ ├── src │ │ ├── index.ts │ │ ├── LightIcon.tsx │ │ └── DarkIcon.tsx │ └── tsconfig.json ├── zoom │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── ZoomMenuItemProps.ts │ │ │ ├── RenderZoomInProps.ts │ │ │ ├── RenderZoomOutProps.ts │ │ │ ├── StoreProps.ts │ │ │ └── RenderZoomProps.ts │ │ ├── styles │ │ │ └── zoomPopover.module.css │ │ ├── ZoomOutIcon.tsx │ │ └── ZoomInIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── attachment │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── index.ts │ │ ├── types │ │ │ ├── StoreProps.ts │ │ │ └── FileItem.ts │ │ ├── getFileName.ts │ │ └── styles │ │ │ ├── attachmentLoader.module.css │ │ │ └── attachmentListWithStore.module.css │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── bookmark │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── styles │ │ │ ├── bookmarkList.module.css │ │ │ └── bookmarkListLoader.module.css │ │ ├── RightArrowIcon.tsx │ │ ├── types │ │ │ ├── IsBookmarkExpanded.ts │ │ │ └── StoreProps.ts │ │ ├── index.ts │ │ └── DownArrowIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── full-screen │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── Zoom.ts │ │ │ └── StoreProps.ts │ │ ├── styles │ │ │ ├── exitFullScreenButton.module.css │ │ │ └── overlay.module.css │ │ ├── index.ts │ │ ├── FullScreenIcon.tsx │ │ └── ExitFullScreenIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── get-file │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── RenderDownloadProps.ts │ │ │ └── StoreProps.ts │ │ ├── getFileName.ts │ │ ├── index.ts │ │ └── DownloadIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── highlight │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── DivText.ts │ │ │ ├── HighlightArea.ts │ │ │ ├── RenderHighlightsProps.ts │ │ │ ├── SelectionData.ts │ │ │ ├── RenderHighlightContentProps.ts │ │ │ ├── StoreProps.ts │ │ │ └── RenderHighlightTargetProps.ts │ │ ├── constants.ts │ │ ├── structs │ │ │ ├── Trigger.ts │ │ │ └── SelectionRange.ts │ │ ├── styles │ │ │ ├── clickDrag.module.css │ │ │ └── selectedText.module.css │ │ ├── MessageIcon.tsx │ │ ├── HighlightRect.tsx │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── properties │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── styles │ │ │ ├── propertiesLoader.module.css │ │ │ ├── propertiesModal.module.css │ │ │ └── propertyItem.module.css │ │ ├── types │ │ │ ├── RenderShowPropertiesProps.ts │ │ │ ├── StoreProps.ts │ │ │ └── PropertiesData.ts │ │ ├── utils │ │ │ ├── getFileName.ts │ │ │ └── getFileSize.ts │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── scroll-mode │ ├── .npmignore │ ├── tsconfig.build.json │ ├── dist │ │ └── index.js │ ├── src │ │ ├── types │ │ │ ├── RenderSwitchViewModeProps.ts │ │ │ ├── RenderSwitchScrollModeProps.ts │ │ │ └── StoreProps.ts │ │ ├── PageScrollingIcon.tsx │ │ ├── DualPageViewModeIcon.tsx │ │ └── DualPageCoverViewModeIcon.tsx │ └── tsconfig.json ├── thumbnail │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── structs │ │ │ └── ThumbnailDirection.ts │ │ ├── types │ │ │ ├── CoverProps.ts │ │ │ ├── RenderCurrentPageLabelProps.ts │ │ │ └── StoreProps.ts │ │ ├── styles │ │ │ ├── thumbnailListWithStore.module.css │ │ │ └── thumbnailContainer.module.css │ │ ├── SpinnerContext.tsx │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── toolbar │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ └── TransformToolbarSlot.ts │ │ ├── index.ts │ │ └── styles │ │ │ └── index.css │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── default-layout │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ └── StoreProps.ts │ │ ├── styles │ │ │ └── index.css │ │ ├── index.ts │ │ └── FileIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── locale-switcher │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ └── index.ts │ ├── dist │ │ └── index.js │ └── tsconfig.json ├── page-navigation │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ │ ├── types │ │ │ ├── index.ts │ │ │ ├── GoToPage.ts │ │ │ └── StoreProps.ts │ │ ├── styles │ │ │ └── currentPageInput.module.css │ │ ├── NextIcon.tsx │ │ ├── PreviousIcon.tsx │ │ ├── UpArrowIcon.tsx │ │ └── DownArrowIcon.tsx │ ├── dist │ │ └── index.js │ └── tsconfig.json └── selection-mode │ ├── .npmignore │ ├── tsconfig.build.json │ ├── src │ ├── structs │ │ └── SelectionMode.ts │ ├── types │ │ ├── StoreProps.ts │ │ └── RenderSwitchSelectionModeProps.ts │ ├── styles │ │ └── selectionMode.module.css │ └── index.ts │ ├── dist │ └── index.js │ └── tsconfig.json ├── samples ├── dummy.pdf ├── bookmark.pdf ├── sample-2.pdf ├── sample.pdf ├── external-link.pdf ├── 100-pages-blank.pdf ├── 500-pages-blank.pdf ├── disallow-print.pdf ├── bookmarks-level-1.pdf ├── bookmarks-level-2.pdf ├── bookmarks-level-3.pdf ├── sample-protected.pdf ├── sample-two-pages.pdf ├── different-dimensions.pdf ├── pdf-open-parameters.pdf ├── 5000-of-dummy-optimized.pdf └── pdf-open-parameters-rotated.pdf ├── assets └── screenshot.png ├── .prettierignore ├── prettier.config.js ├── LICENSE.md ├── __setups__ └── SimpleMockResizeObserver.ts ├── .gitignore ├── jest-puppeteer.config.ts ├── SETUP.md ├── turbo.json ├── jest-e2e.config.ts ├── .eslintrc └── tsconfig.json /demo/nextjs/public/.gitignore: -------------------------------------------------------------------------------- 1 | * -------------------------------------------------------------------------------- /@types/extensions.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /changelogs/v1.0.0.md: -------------------------------------------------------------------------------- 1 | ## v1.0.0 2 | 3 | First release 4 | -------------------------------------------------------------------------------- /demo/webpack/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /packages/core/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/drop/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/open/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/print/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/rotate/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/search/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/theme/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/zoom/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/attachment/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/bookmark/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/full-screen/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/get-file/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/highlight/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/properties/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/scroll-mode/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/thumbnail/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/toolbar/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/default-layout/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/locale-switcher/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/page-navigation/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /packages/selection-mode/.npmignore: -------------------------------------------------------------------------------- 1 | __e2e__/ 2 | __tests__/ 3 | dist/ 4 | src/ 5 | tsconfig.* 6 | -------------------------------------------------------------------------------- /samples/dummy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/dummy.pdf -------------------------------------------------------------------------------- /samples/bookmark.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/bookmark.pdf -------------------------------------------------------------------------------- /samples/sample-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/sample-2.pdf -------------------------------------------------------------------------------- /samples/sample.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/sample.pdf -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/assets/screenshot.png -------------------------------------------------------------------------------- /samples/external-link.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/external-link.pdf -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | demo/nextjs/.next 2 | demo/nextjs/public 3 | demo/webpack/dist 4 | node_modules 5 | package-lock.json -------------------------------------------------------------------------------- /samples/100-pages-blank.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/100-pages-blank.pdf -------------------------------------------------------------------------------- /samples/500-pages-blank.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/500-pages-blank.pdf -------------------------------------------------------------------------------- /samples/disallow-print.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/disallow-print.pdf -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, 3 | singleQuote: true, 4 | tabWidth: 4, 5 | }; 6 | -------------------------------------------------------------------------------- /samples/bookmarks-level-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/bookmarks-level-1.pdf -------------------------------------------------------------------------------- /samples/bookmarks-level-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/bookmarks-level-2.pdf -------------------------------------------------------------------------------- /samples/bookmarks-level-3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/bookmarks-level-3.pdf -------------------------------------------------------------------------------- /samples/sample-protected.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/sample-protected.pdf -------------------------------------------------------------------------------- /samples/sample-two-pages.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/sample-two-pages.pdf -------------------------------------------------------------------------------- /samples/different-dimensions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/different-dimensions.pdf -------------------------------------------------------------------------------- /samples/pdf-open-parameters.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/pdf-open-parameters.pdf -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | 3 | You have to purchase a Commercial License at the [official website](https://react-pdf-viewer.dev). 4 | -------------------------------------------------------------------------------- /demo/webpack/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /samples/5000-of-dummy-optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/5000-of-dummy-optimized.pdf -------------------------------------------------------------------------------- /samples/pdf-open-parameters-rotated.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code/app-react-pdf-viewer/master/samples/pdf-open-parameters-rotated.pdf -------------------------------------------------------------------------------- /__setups__/SimpleMockResizeObserver.ts: -------------------------------------------------------------------------------- 1 | export class SimpleMockResizeObserver { 2 | disconnect() {} 3 | observe() {} 4 | unobserve() {} 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .turbo 3 | demo/nextjs/.next 4 | node_modules 5 | samples/ignore 6 | package-lock.json 7 | packages/**/lib 8 | packages/**/node_modules -------------------------------------------------------------------------------- /changelogs/v1.0.2.md: -------------------------------------------------------------------------------- 1 | ## v1.0.2 2 | 3 | **Improvement** 4 | 5 | - Support SSR 6 | 7 | **Bug fixes** 8 | 9 | - Cannot re-export a type when --isolatedModules is set to true 10 | - The CSS files are missing in es6 package 11 | -------------------------------------------------------------------------------- /demo/nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /changelogs/v2.2.1.md: -------------------------------------------------------------------------------- 1 | ## v2.2.1 2 | 3 | **Improvements** 4 | 5 | - Keep the current page and scroll position after zooming the document 6 | - Pre-render a few of previous and next pages of the current page, so users see the page instantly when scrolling 7 | -------------------------------------------------------------------------------- /packages/core/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/drop/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/open/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/print/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/rotate/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/search/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/theme/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/toolbar/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/zoom/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/attachment/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/bookmark/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/full-screen/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/get-file/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/highlight/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/properties/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/scroll-mode/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/thumbnail/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/default-layout/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/locale-switcher/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/page-navigation/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/selection-mode/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["./__e2e__", "./__tests__"], 4 | "compilerOptions": { 5 | "declaration": true, 6 | "declarationDir": "./lib/@types", 7 | "emitDeclarationOnly": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/src/loader/LoadingStatus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export class LoadingStatus {} 10 | -------------------------------------------------------------------------------- /packages/page-navigation/src/types/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export * from './GoToPage'; 10 | -------------------------------------------------------------------------------- /changelogs/v1.1.0.md: -------------------------------------------------------------------------------- 1 | ## v1.1.0 2 | 3 | **New features** 4 | 5 | - Add new, optional `defaultScale` parameter that indicates the default zoom level: 6 | 7 | ```javascript 8 | 9 | ``` 10 | 11 | **Improvement** 12 | 13 | - The document should fit best in the container initially 14 | -------------------------------------------------------------------------------- /packages/core/src/utils/uniqueId.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | let id = 0; 10 | export const uniqueId = (): number => id++; 11 | -------------------------------------------------------------------------------- /packages/drop/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | // Plugin 12 | export * from './dropPlugin'; 13 | -------------------------------------------------------------------------------- /jest-puppeteer.config.ts: -------------------------------------------------------------------------------- 1 | import { type JestPuppeteerConfig } from 'jest-environment-puppeteer'; 2 | 3 | const config: JestPuppeteerConfig = { 4 | launch: { 5 | // We need it for full-screen plugin test cases 6 | headless: false, 7 | product: 'chrome', 8 | }, 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/properties/src/styles/propertiesLoader.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .loader { 10 | text-align: center; 11 | } 12 | -------------------------------------------------------------------------------- /packages/attachment/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | // Plugin 12 | export * from './attachmentPlugin'; 13 | -------------------------------------------------------------------------------- /changelogs/v3.3.2.md: -------------------------------------------------------------------------------- 1 | ## v3.3.2 2 | 3 | **Bug fixes** 4 | 5 | Fix more issues that only happen with React 18's Strict mode: 6 | 7 | - The `initialPage` option doesn't work 8 | - The pages are flickering when zooming the document 9 | - There is a page that is not rendered even it is visible when users zoom the document continuously 10 | -------------------------------------------------------------------------------- /packages/core/src/styles/skeleton.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .skeleton { 10 | background-color: hsl(var(--rpv-muted)); 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/types/Offset.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface Offset { 10 | left: number; 11 | top: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/types/Rect.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface Rect { 10 | height: number; 11 | width: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/utils/easeOutQuart.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const easeOutQuart = (t: number): number => 1 - Math.pow(1 - t, 4); 10 | -------------------------------------------------------------------------------- /packages/zoom/src/types/ZoomMenuItemProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface ZoomMenuItemProps { 10 | onClick: () => void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/structs/LayerRenderStatus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum LayerRenderStatus { 10 | PreRender, 11 | DidRender, 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/styles/separator.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .separator { 10 | border-bottom: 1px solid hsl(var(--rpv-border)); 11 | } 12 | -------------------------------------------------------------------------------- /packages/get-file/src/types/RenderDownloadProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderDownloadProps { 10 | onClick: () => void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/types/CharacterMap.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface CharacterMap { 10 | isCompressed: boolean; 11 | url: string; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/types/LocalizationMap.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface LocalizationMap { 10 | [key: string]: string | LocalizationMap; 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/utils/clamp.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const clamp = (min: number, max: number, value: number) => Math.max(min, Math.min(value, max)); 10 | -------------------------------------------------------------------------------- /packages/selection-mode/src/structs/SelectionMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum SelectionMode { 10 | Hand = 'Hand', 11 | Text = 'Text', 12 | } 13 | -------------------------------------------------------------------------------- /packages/properties/src/types/RenderShowPropertiesProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderShowPropertiesProps { 10 | onClick(): void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/search/src/types/RenderShowSearchPopoverProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderShowSearchPopoverProps { 10 | onClick(): void; 11 | } 12 | -------------------------------------------------------------------------------- /changelogs/v1.2.1.md: -------------------------------------------------------------------------------- 1 | ## v1.2.1 2 | 3 | **Improvement** 4 | 5 | - Make the spinner thiner 6 | - Add minified CSS files 7 | 8 | **Bug fixes** 9 | 10 | - Tooltip for the left/right buttons don't look good in full width mode 11 | - The view now takes full height by default. It fixes the issue that users can't navigate between pages from the toolbar in some cases 12 | -------------------------------------------------------------------------------- /changelogs/v2.10.1.md: -------------------------------------------------------------------------------- 1 | ## v2.10.1 2 | 3 | **New feature** 4 | 5 | - The `Zoom` and `ZoomPopover` components provided by the zoom plugin adds a custom zoom levels 6 | 7 | ```tsx 8 | 9 | 10 | 11 | ``` 12 | 13 | **Bug fix** 14 | 15 | - Clicking the Search button scrolls to the top of page 16 | -------------------------------------------------------------------------------- /packages/core/src/structs/RotateDirection.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum RotateDirection { 10 | Backward = 'Backward', 11 | Forward = 'Forward', 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/types/VisibilityChanged.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface VisibilityChanged { 10 | isVisible: boolean; 11 | ratio: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/open/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface StoreProps { 10 | openFile?(file: File): void; 11 | triggerOpenFile?: boolean; 12 | } 13 | -------------------------------------------------------------------------------- /changelogs/v2.4.1.md: -------------------------------------------------------------------------------- 1 | ## v2.4.1 2 | 3 | **Bug fixes** 4 | 5 | - Clicking the Download button doesn't work. It only works the file when scrolling to the second page 6 | - Using the Default Layout plugin, we can't scroll between pages on Safari 14 7 | - The Open file button covers other elements, so we can't click on the Download or Print buttons. This issue only happens on Safari 14 8 | -------------------------------------------------------------------------------- /packages/core/src/structs/ToggleStatus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum ToggleStatus { 10 | Close = 'Close', 11 | Open = 'Open', 12 | Toggle = 'Toggle', 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/styles/menuDivider.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .divider { 10 | border-bottom: 1px solid hsl(var(--rpv-border)); 11 | margin: 0.25rem 0; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/types/DocumentAskPasswordEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface DocumentAskPasswordEvent { 10 | verifyPassword: (password: string) => void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/types/PageSize.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface PageSize { 10 | pageHeight: number; 11 | pageWidth: number; 12 | rotation: number; 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/types/Toggle.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { ToggleStatus } from '../structs/ToggleStatus'; 10 | 11 | export type Toggle = (status?: ToggleStatus) => void; 12 | -------------------------------------------------------------------------------- /packages/core/src/utils/isMac.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const isMac = () => (typeof window !== 'undefined' ? /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) : false); 10 | -------------------------------------------------------------------------------- /packages/default-layout/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface StoreProps { 10 | isCurrentTabOpened: boolean; 11 | currentTab: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/print/src/types/RenderPrintProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderPrintProps { 10 | enableShortcuts: boolean; 11 | onClick: () => void; 12 | } 13 | -------------------------------------------------------------------------------- /packages/search/src/types/OnHighlightKeyword.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface OnHighlightKeyword { 10 | highlightEle: HTMLElement; 11 | keyword: RegExp; 12 | } 13 | -------------------------------------------------------------------------------- /packages/zoom/src/types/RenderZoomInProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderZoomInProps { 10 | enableShortcuts: boolean; 11 | onClick: () => void; 12 | } 13 | -------------------------------------------------------------------------------- /packages/zoom/src/types/RenderZoomOutProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface RenderZoomOutProps { 10 | enableShortcuts: boolean; 11 | onClick: () => void; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/utils/indexOfMax.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const indexOfMax = (arr: number[]): number => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0); 10 | -------------------------------------------------------------------------------- /packages/core/src/utils/randomNumber.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const randomNumber = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1)) + min; 10 | -------------------------------------------------------------------------------- /packages/highlight/src/types/DivText.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface DivText { 10 | pageIndex: number; 11 | divIndex: number; 12 | textContent: string; 13 | } 14 | -------------------------------------------------------------------------------- /packages/thumbnail/src/structs/ThumbnailDirection.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum ThumbnailDirection { 10 | Horizontal = 'Horizontal', 11 | Vertical = 'Vertical', 12 | } 13 | -------------------------------------------------------------------------------- /SETUP.md: -------------------------------------------------------------------------------- 1 | - Install dependencies 2 | 3 | ```console 4 | $ npm install 5 | $ npm install --workspace=@react-pdf-viewer/nextjs-demo 6 | $ npm install --workspace=@react-pdf-viewer/webpack-typescript-demo 7 | ``` 8 | 9 | - Build all packages 10 | 11 | ```console 12 | $ npm run js 13 | $ npm run css 14 | ``` 15 | 16 | - Check the formats 17 | 18 | ```console 19 | npm run lint 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/bookmark/src/styles/bookmarkList.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .list { 10 | list-style-type: none; 11 | overflow: auto; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | -------------------------------------------------------------------------------- /packages/page-navigation/src/styles/currentPageInput.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | margin: 0 0.25rem; 11 | text-align: right; 12 | width: 3rem; 13 | } 14 | -------------------------------------------------------------------------------- /packages/search/src/types/SingleKeyword.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type FlagKeyword } from './FlagKeyword'; 10 | 11 | export type SingleKeyword = string | RegExp | FlagKeyword; 12 | -------------------------------------------------------------------------------- /demo/webpack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./dist/", 5 | "esModuleInterop": true, 6 | "sourceMap": true, 7 | "noImplicitAny": true, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "resolveJsonModule": true, 11 | "target": "esnext" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/structs/PasswordStatus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum PasswordStatus { 10 | RequiredPassword = 'RequiredPassword', 11 | WrongPassword = 'WrongPassword', 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/styles/popoverOverlay.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .overlay { 10 | bottom: 0; 11 | left: 0; 12 | position: fixed; 13 | right: 0; 14 | top: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/highlight/src/constants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const HIGHLIGHT_LAYER_ATTR = 'data-highlight-text-layer'; 10 | export const HIGHLIGHT_PAGE_ATTR = 'data-highlight-text-page'; 11 | -------------------------------------------------------------------------------- /packages/core/src/structs/ScrollDirection.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum ScrollDirection { 10 | Horizontal = 'Horizontal', 11 | Vertical = 'Vertical', 12 | Both = 'Both', 13 | } 14 | -------------------------------------------------------------------------------- /packages/full-screen/src/types/Zoom.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SpecialZoomLevel } from '@react-pdf-viewer/core'; 10 | 11 | export type Zoom = (scale: number | SpecialZoomLevel) => void; 12 | -------------------------------------------------------------------------------- /packages/print/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { PrintStatus } from '../structs/PrintStatus'; 10 | 11 | export interface StoreProps { 12 | printStatus: PrintStatus; 13 | } 14 | -------------------------------------------------------------------------------- /packages/search/src/types/NormalizedKeyword.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface NormalizedKeyword { 10 | keyword: string; 11 | regExp: RegExp; 12 | wholeWords: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /packages/thumbnail/src/types/CoverProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface CoverProps { 10 | getPageIndex?({ numPages }: { numPages: number }): number; 11 | width?: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/attachment/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | doc?: PdfJs.PdfDocument; 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/styles/canvasLayer.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .layer { 10 | direction: ltr; 11 | left: 0; 12 | position: absolute; 13 | overflow: hidden; 14 | top: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/types/OpenFile.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '../types/PdfJs'; 10 | 11 | export interface OpenFile { 12 | data: PdfJs.FileData; 13 | name: string; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/types/ZoomEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from './PdfJs'; 10 | 11 | export interface ZoomEvent { 12 | doc: PdfJs.PdfDocument; 13 | scale: number; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/localization/en_US.json: -------------------------------------------------------------------------------- 1 | { 2 | "core": { 3 | "askingPassword": { 4 | "requirePasswordToOpen": "This document requires a password to open", 5 | "submit": "Submit" 6 | }, 7 | "wrongPassword": { 8 | "tryAgain": "The password is wrong. Please try again" 9 | }, 10 | "pageLabel": "Page {{pageIndex}}" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/structs/SpecialZoomLevel.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum SpecialZoomLevel { 10 | ActualSize = 'ActualSize', 11 | PageFit = 'PageFit', 12 | PageWidth = 'PageWidth', 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/structs/ViewMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum ViewMode { 10 | DualPage = 'DualPage', 11 | DualPageWithCover = 'DualPageWithCover', 12 | SinglePage = 'SinglePage', 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/utils/getFileExt.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileExt = (url: string): string => { 10 | const str = url.split(/\./).pop(); 11 | return str ? str.toLowerCase() : ''; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/toolbar/src/types/TransformToolbarSlot.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type ToolbarSlot } from './ToolbarSlot'; 10 | 11 | export type TransformToolbarSlot = (toolbarSlot: ToolbarSlot) => ToolbarSlot; 12 | -------------------------------------------------------------------------------- /changelogs/v2.9.1.md: -------------------------------------------------------------------------------- 1 | ## v2.9.1 2 | 3 | **Improvement** 4 | 5 | As we know, the `Viewer` component only renders the pages which are visible in the screen. For an invisible page, users will see a spinner. However, the animation used in the `Spinner` component can slow down the app if the document has a big number of pages. 6 | 7 | This version improves the performance by animating the `Spinner` component when it's visible only. 8 | -------------------------------------------------------------------------------- /packages/core/src/structs/ScrollMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum ScrollMode { 10 | Page = 'Page', 11 | Horizontal = 'Horizontal', 12 | Vertical = 'Vertical', 13 | Wrapped = 'Wrapped', 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/styles/menu.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .menu { 10 | display: flex; 11 | flex-direction: column; 12 | } 13 | 14 | .menuRtl { 15 | direction: rtl; 16 | text-align: right; 17 | } 18 | -------------------------------------------------------------------------------- /packages/core/src/utils/isDarkMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const isDarkMode = () => 10 | typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 11 | -------------------------------------------------------------------------------- /packages/open/src/types/RenderOpenProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | 11 | export interface RenderOpenProps { 12 | onClick: (e: React.ChangeEvent) => void; 13 | } 14 | -------------------------------------------------------------------------------- /packages/attachment/src/types/FileItem.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface FileItem { 12 | data: PdfJs.FileData; 13 | fileName: string; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/types/PageChangeEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from './PdfJs'; 10 | 11 | export interface PageChangeEvent { 12 | currentPage: number; 13 | doc: PdfJs.PdfDocument; 14 | } 15 | -------------------------------------------------------------------------------- /demo/webpack/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 3 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 4 | margin: 0; 5 | padding: 0; 6 | -webkit-font-smoothing: antialiased; 7 | font-synthesis-weight: none; 8 | text-rendering: optimizeLegibility; 9 | } 10 | * { 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /packages/attachment/src/getFileName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileName = (url: string): string => { 10 | const str = url.split('/').pop(); 11 | return str ? str.split('#')[0].split('?')[0] : url; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/core/src/utils/chunk.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const chunk = (arr: T[], size: number): T[][] => 10 | arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), [] as T[][]); 11 | -------------------------------------------------------------------------------- /packages/core/src/utils/getFileName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileName = (url: string): string => { 10 | const str = url.split('/').pop(); 11 | return str ? str.split('#')[0].split('?')[0] : url; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/core/src/utils/maxByKey.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const maxByKey = , K extends keyof T>(arr: T[], key: K): T => 10 | arr.reduce((a, b) => (a[key] >= b[key] ? a : b), {} as T); 11 | -------------------------------------------------------------------------------- /packages/get-file/src/getFileName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileName = (url: string): string => { 10 | const str = url.split('/').pop(); 11 | return str ? str.split('#')[0].split('?')[0] : url; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/properties/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | doc?: PdfJs.PdfDocument; 13 | fileName: string; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/styles/pageSizeCalculator.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | align-items: center; 11 | display: flex; 12 | height: 100%; 13 | justify-content: center; 14 | width: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /packages/highlight/src/types/HighlightArea.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface HighlightArea { 10 | height: number; 11 | left: number; 12 | pageIndex: number; 13 | top: number; 14 | width: number; 15 | } 16 | -------------------------------------------------------------------------------- /packages/properties/src/utils/getFileName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileName = (url: string): string => { 10 | const str = url.split('/').pop(); 11 | return str ? str.split('#')[0].split('?')[0] : url; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/search/src/types/FlagKeyword.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface FlagKeyword { 10 | keyword: string; 11 | matchCase?: boolean; // `false` by default 12 | wholeWords?: boolean; // `false` by default 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/annotations/AnnotationBorderStyleType.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum AnnotationBorderStyleType { 10 | Solid = 1, 11 | Dashed = 2, 12 | Beveled = 3, 13 | Inset = 4, 14 | Underline = 5, 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/utils/roundToDivide.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const roundToDivide = (a: number, b: number): number => { 10 | const remainder = a % b; 11 | return remainder === 0 ? a : Math.floor(a - remainder); 12 | }; 13 | -------------------------------------------------------------------------------- /packages/locale-switcher/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { LocaleIcon } from './LocaleIcon'; 12 | export { type LocalePopoverProps } from './LocalePopover'; 13 | export * from './localeSwitcherPlugin'; 14 | -------------------------------------------------------------------------------- /packages/print/src/styles/checkPrintPermission.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .body { 10 | padding: 1rem; 11 | } 12 | 13 | .footer { 14 | display: flex; 15 | justify-content: center; 16 | padding: 0 1rem 1rem 0; 17 | } 18 | -------------------------------------------------------------------------------- /packages/get-file/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type OpenFile, type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | doc?: PdfJs.PdfDocument; 13 | file?: OpenFile; 14 | } 15 | -------------------------------------------------------------------------------- /packages/print/src/isRunningInJest.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | // Returns `true` if the code is running in Jest environment 10 | export const isRunningInJest = () => typeof process !== 'undefined' && process.env.JEST_WORKER_ID !== undefined; 11 | -------------------------------------------------------------------------------- /packages/core/src/structs/Breakpoint.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum Breakpoint { 10 | ExtraSmall = 'ExtraSmall', 11 | Small = 'Small', 12 | Medium = 'Medium', 13 | Large = 'Large', 14 | ExtraLarge = 'ExtraLarge', 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/virtualizer/VirtualItem.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type ItemMeasurement } from './ItemMeasurement'; 10 | 11 | export interface VirtualItem extends ItemMeasurement { 12 | measureRef: (ele: HTMLElement) => void; 13 | } 14 | -------------------------------------------------------------------------------- /packages/rotate/src/types/RenderRotateProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection } from '@react-pdf-viewer/core'; 10 | 11 | export interface RenderRotateProps { 12 | direction: RotateDirection; 13 | onClick(): void; 14 | } 15 | -------------------------------------------------------------------------------- /packages/zoom/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SpecialZoomLevel } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | scale?: number; 13 | zoom?(scale: number | SpecialZoomLevel): void; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/core.min.js'); 13 | } else { 14 | module.exports = require('./cjs/core.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/drop/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/drop.min.js'); 13 | } else { 14 | module.exports = require('./cjs/drop.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/open/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/open.min.js'); 13 | } else { 14 | module.exports = require('./cjs/open.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/print/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/print.min.js'); 13 | } else { 14 | module.exports = require('./cjs/print.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/search/src/types/MatchPosition.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface MatchPosition { 10 | // The index of match in the page 11 | // Each page may have multiple matches 12 | matchIndex: number; 13 | pageIndex: number; 14 | } 15 | -------------------------------------------------------------------------------- /packages/theme/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/theme.min.js'); 13 | } else { 14 | module.exports = require('./cjs/theme.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/zoom/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/zoom.min.js'); 13 | } else { 14 | module.exports = require('./cjs/zoom.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/hooks/useIsomorphicLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; 14 | -------------------------------------------------------------------------------- /packages/rotate/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/rotate.min.js'); 13 | } else { 14 | module.exports = require('./cjs/rotate.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/search/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/search.min.js'); 13 | } else { 14 | module.exports = require('./cjs/search.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/search/src/types/SearchTargetPage.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface SearchTargetPage { 10 | numPages: number; 11 | pageIndex: number; 12 | } 13 | 14 | export type SearchTargetPageFilter = (targetPage: SearchTargetPage) => boolean; 15 | -------------------------------------------------------------------------------- /packages/toolbar/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/toolbar.min.js'); 13 | } else { 14 | module.exports = require('./cjs/toolbar.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/bookmark/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/bookmark.min.js'); 13 | } else { 14 | module.exports = require('./cjs/bookmark.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/get-file/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/get-file.min.js'); 13 | } else { 14 | module.exports = require('./cjs/get-file.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/properties/src/types/PropertiesData.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface PropertiesData { 12 | fileName: string; 13 | info: PdfJs.MetaDataInfo; 14 | length: number; 15 | } 16 | -------------------------------------------------------------------------------- /packages/selection-mode/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SelectionMode } from '../structs/SelectionMode'; 10 | 11 | export interface StoreProps { 12 | getPagesContainer?(): HTMLElement; 13 | selectionMode?: SelectionMode; 14 | } 15 | -------------------------------------------------------------------------------- /packages/zoom/src/types/RenderZoomProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SpecialZoomLevel } from '@react-pdf-viewer/core'; 10 | 11 | export interface RenderZoomProps { 12 | scale: number; 13 | onZoom(newScale: number | SpecialZoomLevel): void; 14 | } 15 | -------------------------------------------------------------------------------- /packages/attachment/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/attachment.min.js'); 13 | } else { 14 | module.exports = require('./cjs/attachment.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/types/DocumentLoadEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type OpenFile } from './OpenFile'; 10 | import { type PdfJs } from './PdfJs'; 11 | 12 | export interface DocumentLoadEvent { 13 | doc: PdfJs.PdfDocument; 14 | file: OpenFile; 15 | } 16 | -------------------------------------------------------------------------------- /packages/highlight/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/highlight.min.js'); 13 | } else { 14 | module.exports = require('./cjs/highlight.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/properties/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/properties.min.js'); 13 | } else { 14 | module.exports = require('./cjs/properties.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/rotate/src/types/RenderRotatePageProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection } from '@react-pdf-viewer/core'; 10 | 11 | export interface RenderRotatePageProps { 12 | onRotatePage(pageIndex: number, direction: RotateDirection): void; 13 | } 14 | -------------------------------------------------------------------------------- /packages/thumbnail/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/thumbnail.min.js'); 13 | } else { 14 | module.exports = require('./cjs/thumbnail.js'); 15 | } 16 | -------------------------------------------------------------------------------- /changelogs/v3.1.1.md: -------------------------------------------------------------------------------- 1 | ## v3.1.1 2 | 3 | **Improvement** 4 | 5 | - The full screen button and menu item are disabled on browsers that don't support full screen APIs. It happens on iOS Safari and iOS Chrome, for example. 6 | 7 | **Bug fixes** 8 | 9 | - `onPageChange()` should fire after `onDocumentLoad()` 10 | - The pages aren't layouted properly when they have different dimensions 11 | - The pages are blank initially until users scroll or interact with the page 12 | -------------------------------------------------------------------------------- /packages/attachment/src/styles/attachmentLoader.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .empty { 10 | height: 100%; 11 | overflow: auto; 12 | padding: 0.5rem 0; 13 | text-align: center; 14 | width: 100%; 15 | } 16 | .emptyRtl { 17 | direction: rtl; 18 | } 19 | -------------------------------------------------------------------------------- /packages/core/src/components/Separator.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | import styles from '../styles/separator.module.css'; 13 | 14 | export const Separator: React.FC = () =>
; 15 | -------------------------------------------------------------------------------- /packages/full-screen/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/full-screen.min.js'); 13 | } else { 14 | module.exports = require('./cjs/full-screen.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/open/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type OpenProps } from './Open'; 12 | export { OpenFileIcon } from './OpenFileIcon'; 13 | export * from './openPlugin'; 14 | export { type RenderOpenProps } from './types/RenderOpenProps'; 15 | -------------------------------------------------------------------------------- /packages/scroll-mode/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/scroll-mode.min.js'); 13 | } else { 14 | module.exports = require('./cjs/scroll-mode.js'); 15 | } 16 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "tasks": { 4 | "js": { 5 | "cache": false, 6 | "dependsOn": ["^js"] 7 | }, 8 | "css": { 9 | "cache": false, 10 | "dependsOn": ["^css"] 11 | }, 12 | "release": { 13 | "dependsOn": ["^release"] 14 | }, 15 | "test": { 16 | "dependsOn": ["^test"] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/styles/annotationLayer.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .layer { 10 | /* 11 | * Make it displayed on top of the shadow layer 12 | * so users can interact with the annotations (for example, follow links) 13 | */ 14 | z-index: 1; 15 | } 16 | -------------------------------------------------------------------------------- /packages/print/src/structs/PrintStatus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum PrintStatus { 10 | CheckingPermission = 'CheckingPermission', 11 | Inactive = 'Inactive', 12 | Preparing = 'Preparing', 13 | Cancelled = 'Cancelled', 14 | Ready = 'Ready', 15 | } 16 | -------------------------------------------------------------------------------- /packages/default-layout/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/default-layout.min.js'); 13 | } else { 14 | module.exports = require('./cjs/default-layout.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/full-screen/src/styles/exitFullScreenButton.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .button { 10 | bottom: 0; 11 | padding: 0.5rem; 12 | position: fixed; 13 | z-index: 2; 14 | } 15 | .buttonLtr { 16 | right: 0; 17 | } 18 | .buttonRtl { 19 | left: 0; 20 | } 21 | -------------------------------------------------------------------------------- /packages/locale-switcher/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/locale-switcher.min.js'); 13 | } else { 14 | module.exports = require('./cjs/locale-switcher.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/page-navigation/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/page-navigation.min.js'); 13 | } else { 14 | module.exports = require('./cjs/page-navigation.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/print/src/getAllPagesNumbers.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export const getAllPagesNumbers = (doc: PdfJs.PdfDocument): number[] => 12 | Array(doc.numPages) 13 | .fill(0) 14 | .map((_, i) => i); 15 | -------------------------------------------------------------------------------- /packages/selection-mode/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use strict'; 10 | 11 | if (process.env.NODE_ENV === 'production') { 12 | module.exports = require('./cjs/selection-mode.min.js'); 13 | } else { 14 | module.exports = require('./cjs/selection-mode.js'); 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/responsive/BreakpointContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | import { Breakpoint } from '../structs/Breakpoint'; 13 | 14 | export const BreakpointContext = React.createContext(Breakpoint.ExtraSmall); 15 | -------------------------------------------------------------------------------- /packages/core/src/icons/CheckIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const CheckIcon: React.FC = () => ( 13 | 14 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /demo/nextjs/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { Head, Html, Main, NextScript } from 'next/document'; 2 | import * as React from 'react'; 3 | 4 | class MyDocument extends Document { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | 18 | export default MyDocument; 19 | -------------------------------------------------------------------------------- /packages/rotate/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | rotate?(direction: RotateDirection): void; 13 | rotatePage?(pageIndex: number, direction: RotateDirection): void; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/structs/FullScreenMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum FullScreenMode { 10 | Normal = 'Normal', 11 | // Start entering the full screen mode 12 | Entering = 'Entering', 13 | Entered = 'Entered', 14 | Exitting = 'Exitting', 15 | Exited = 'Exited', 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/structs/PageMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum PageMode { 10 | Attachments = 'UseAttachments', 11 | Bookmarks = 'UseOutlines', 12 | ContentGroup = 'UseOC', 13 | Default = 'UserNone', 14 | FullScreen = 'FullScreen', 15 | Thumbnails = 'UseThumbs', 16 | } 17 | -------------------------------------------------------------------------------- /packages/selection-mode/src/types/RenderSwitchSelectionModeProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SelectionMode } from '../structs/SelectionMode'; 10 | 11 | export interface RenderSwitchSelectionModeProps { 12 | isSelected: boolean; 13 | mode: SelectionMode; 14 | onClick(): void; 15 | } 16 | -------------------------------------------------------------------------------- /packages/highlight/src/structs/Trigger.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum Trigger { 10 | // It will not trigger the highlight. It is often used to render the highlight areas 11 | None = 'None', 12 | // Show the target after users select text 13 | TextSelection = 'TextSelection', 14 | } 15 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/types/RenderSwitchViewModeProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { ViewMode } from '@react-pdf-viewer/core'; 10 | 11 | export interface RenderSwitchViewModeProps { 12 | isDisabled: boolean; 13 | isSelected: boolean; 14 | mode: ViewMode; 15 | onClick(): void; 16 | } 17 | -------------------------------------------------------------------------------- /packages/attachment/src/styles/attachmentListWithStore.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | /* Center the content */ 11 | align-items: center; 12 | display: flex; 13 | justify-content: center; 14 | 15 | /* Take full size */ 16 | height: 100%; 17 | width: 100%; 18 | } 19 | -------------------------------------------------------------------------------- /packages/core/src/icons/TriangleIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const TriangleIcon: React.FC = () => ( 13 | 14 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /packages/core/src/styles/icon.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .icon { 10 | fill: none; 11 | stroke: currentColor; 12 | stroke-linecap: round; 13 | stroke-linejoin: round; 14 | stroke-width: 1; 15 | text-align: center; 16 | } 17 | 18 | .iconRtl { 19 | transform: scale(-1, 1); 20 | } 21 | -------------------------------------------------------------------------------- /packages/core/src/types/RotateEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection } from '../structs/RotateDirection'; 10 | import { type PdfJs } from './PdfJs'; 11 | 12 | export interface RotateEvent { 13 | direction: RotateDirection; 14 | doc: PdfJs.PdfDocument; 15 | rotation: number; 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/types/SetRenderRange.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface VisiblePagesRange { 10 | endPage: number; 11 | numPages: number; 12 | startPage: number; 13 | } 14 | 15 | export type SetRenderRange = (visiblePagesRange: VisiblePagesRange) => { endPage: number; startPage: number }; 16 | -------------------------------------------------------------------------------- /packages/thumbnail/src/styles/thumbnailListWithStore.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | height: 100%; 11 | width: 100%; 12 | } 13 | 14 | .loader { 15 | align-items: center; 16 | display: flex; 17 | height: 100%; 18 | justify-content: center; 19 | width: 100%; 20 | } 21 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/types/RenderSwitchScrollModeProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { ScrollMode } from '@react-pdf-viewer/core'; 10 | 11 | export interface RenderSwitchScrollModeProps { 12 | isDisabled: boolean; 13 | isSelected: boolean; 14 | mode: ScrollMode; 15 | onClick(): void; 16 | } 17 | -------------------------------------------------------------------------------- /changelogs/v2.6.1.md: -------------------------------------------------------------------------------- 1 | ## v2.6.1 2 | 3 | **Improvements** 4 | 5 | - Move the CSS variables of the default theme to `:root`, so we can use components (`Button`, `Menu`, `Tooltip`, etc.) outside of the `Viewer` 6 | - Update the `DownloadIcon`, `ExitFullScreenIcon`, `FullScreenIcon` and `OpenFileIcon` icons 7 | 8 | **Bug fixes** 9 | 10 | - Remove duplicate borders of keyword input 11 | - Search results are not highlighted 12 | - The [Search plugin](/https://react-pdf-viewer.dev/plugins/search) can cause a re-render 13 | -------------------------------------------------------------------------------- /changelogs/v2.7.1.md: -------------------------------------------------------------------------------- 1 | ## v2.7.1 2 | 3 | **Improvement** 4 | 5 | Continue improving the accessibility: 6 | 7 | | Component | Press key | Action | 8 | | --------- | --------- | ---------------------------- | 9 | | `Menu` | `End` | Focus on the last menu item | 10 | | | `Home` | Focus on the first menu item | 11 | 12 | **Bug fixes** 13 | 14 | - Automatically scroll to the top of page when opening a menu 15 | - Fix the warning when pressing the _Escape_ key to close a modal 16 | -------------------------------------------------------------------------------- /demo/nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": false, 7 | "forceConsistentCasingInFileNames": true, 8 | "noEmit": true, 9 | "module": "esnext", 10 | "jsx": "preserve", 11 | "lib": ["dom", "esnext"], 12 | "incremental": true 13 | }, 14 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /jest-e2e.config.ts: -------------------------------------------------------------------------------- 1 | import { type Config } from 'jest'; 2 | 3 | const config: Config = { 4 | preset: 'jest-puppeteer', 5 | // Uncomment the `testMatch` option when we want to run a specific test case 6 | // testMatch: ['/packages/search/__e2e__/jumpBetweenMatches.e2e.ts'], 7 | testRegex: ['(/__e2e__/.*|(\\.|/)(e2e))\\.ts$'], 8 | testTimeout: 20 * 1000, // 20s 9 | transform: { 10 | '^.+\\.tsx?$': 'ts-jest', 11 | }, 12 | verbose: true, 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /packages/core/src/annotations/getTitle.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '../types/PdfJs'; 10 | 11 | export const getTitle = (annotation: PdfJs.Annotation): string => { 12 | // `title` property is deprecated 13 | return annotation.titleObj ? annotation.titleObj.str : annotation.title || ''; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/properties/src/styles/propertiesModal.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .modal { 10 | min-height: 20rem; 11 | padding: 0.5rem 0; 12 | } 13 | 14 | .section { 15 | padding: 0 0.5rem; 16 | } 17 | 18 | .footer { 19 | display: flex; 20 | justify-content: center; 21 | margin-top: 0.5rem; 22 | } 23 | -------------------------------------------------------------------------------- /packages/properties/src/utils/getFileSize.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const getFileSize = (bytes: number): string => { 10 | const sufixes = ['B', 'kB', 'MB', 'GB', 'TB']; 11 | const i = Math.floor(Math.log(bytes) / Math.log(1024)); 12 | return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/print/src/getEvenPagesNumbers.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export const getEvenPagesNumbers = (doc: PdfJs.PdfDocument): number[] => 12 | Array(doc.numPages) 13 | .fill(0) 14 | .map((_, i) => i) 15 | .filter((i) => (i + 1) % 2 === 0); 16 | -------------------------------------------------------------------------------- /packages/print/src/getOddPagesNumbers.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export const getOddPagesNumbers = (doc: PdfJs.PdfDocument): number[] => 12 | Array(doc.numPages) 13 | .fill(0) 14 | .map((_, i) => i) 15 | .filter((i) => (i + 1) % 2 === 1); 16 | -------------------------------------------------------------------------------- /packages/core/src/components/MenuDivider.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | import styles from '../styles/menuDivider.module.css'; 13 | 14 | export const MenuDivider: React.FC = () => ( 15 |
16 | ); 17 | -------------------------------------------------------------------------------- /packages/core/src/loader/LoadingState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { LoadingStatus } from './LoadingStatus'; 10 | 11 | export class LoadingState extends LoadingStatus { 12 | public percentages: number; 13 | constructor(percentages: number) { 14 | super(); 15 | this.percentages = percentages; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/core/src/virtualizer/ItemMeasurement.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type Offset } from '../types/Offset'; 10 | import { type Rect } from '../types/Rect'; 11 | 12 | export interface ItemMeasurement { 13 | index: number; 14 | start: Offset; 15 | size: Rect; 16 | end: Offset; 17 | visibility: number; 18 | } 19 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/PageScrollingIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const PageScrollingIcon: React.FC = () => ( 13 | 14 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /changelogs/v2.8.0.md: -------------------------------------------------------------------------------- 1 | ## v2.8.0 2 | 3 | **New features** 4 | 5 | - Support RTL 6 | 7 | ```js 8 | import { TextDirection, Viewer } from '@react-pdf-viewer/core'; 9 | 10 | ; 15 | ``` 16 | 17 | - The `RenderViewer` type includes the theme context 18 | 19 | **Bug fixes** 20 | 21 | - The highlighting elements should be shown below the text, so users can still select the text 22 | - There is an exception when opening a password protected document 23 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core-initial-page/index.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => ( 5 |
14 | 15 |
16 | ); 17 | 18 | export default IndexPage; 19 | -------------------------------------------------------------------------------- /packages/core/src/annotations/getContents.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '../types/PdfJs'; 10 | 11 | export const getContents = (annotation: PdfJs.Annotation): string => { 12 | // `contents` property is deprecated 13 | return annotation.contentsObj ? annotation.contentsObj.str : annotation.contents || ''; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/core/src/types/RotatePageEvent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection } from '../structs/RotateDirection'; 10 | import { type PdfJs } from './PdfJs'; 11 | 12 | export interface RotatePageEvent { 13 | direction: RotateDirection; 14 | doc: PdfJs.PdfDocument; 15 | pageIndex: number; 16 | rotation: number; 17 | } 18 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { ScrollMode, ViewMode } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | scrollMode: ScrollMode; 13 | viewMode: ViewMode; 14 | switchScrollMode(scrollMode: ScrollMode): void; 15 | switchViewMode(viewMode: ViewMode): void; 16 | } 17 | -------------------------------------------------------------------------------- /packages/properties/src/styles/propertyItem.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .item { 10 | align-items: flex-start; 11 | display: flex; 12 | margin: 0.5rem 0; 13 | } 14 | .itemRtl { 15 | direction: rtl; 16 | } 17 | 18 | .label { 19 | padding-right: 0.5rem; 20 | width: 25%; 21 | } 22 | 23 | .value { 24 | flex: 1; 25 | } 26 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core-initial-rotation/index.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => ( 5 |
14 | 15 |
16 | ); 17 | 18 | export default IndexPage; 19 | -------------------------------------------------------------------------------- /packages/core/src/styles/annotation.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .annotation { 10 | position: absolute; 11 | } 12 | 13 | .link { 14 | height: 100%; 15 | left: 0; 16 | position: absolute; 17 | top: 0; 18 | width: 100%; 19 | 20 | &:hover { 21 | background-color: hsl(var(--rpv-highlight) / 0.3); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/highlight/src/styles/clickDrag.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .clickDrag { 10 | background-color: hsl(var(--rpv-highlight) / 0.3); 11 | outline: 1px dashed hsl(var(--rpv-border)); 12 | position: absolute; 13 | /* Higher than text layer */ 14 | z-index: 2; 15 | } 16 | 17 | .clickDragHidden { 18 | display: none; 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/hooks/usePrevious.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const usePrevious = (value: T): T => { 14 | const ref = React.useRef(value); 15 | 16 | React.useEffect(() => { 17 | ref.current = value; 18 | }, [value]); 19 | 20 | return ref.current; 21 | }; 22 | -------------------------------------------------------------------------------- /packages/theme/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { DarkIcon } from './DarkIcon'; 12 | export { LightIcon } from './LightIcon'; 13 | export { type RenderSwitchThemeProps, type SwitchThemeProps } from './SwitchTheme'; 14 | export { type SwitchThemeMenuItemProps } from './SwitchThemeMenuItem'; 15 | export * from './themePlugin'; 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint", 6 | "react" 7 | ], 8 | "extends": [ 9 | "plugin:react/recommended", 10 | "eslint:recommended", 11 | "plugin:@typescript-eslint/eslint-recommended", 12 | "plugin:@typescript-eslint/recommended" 13 | ], 14 | "rules": { 15 | "react/prop-types": "off" 16 | }, 17 | "settings": { 18 | "react": { 19 | "version": "detect" 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /packages/core/src/vendors/PdfJsApiContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { type PdfJsApiProvider } from '../types/PdfJsApiProvider'; 11 | 12 | export interface PdfJsApiContextProps { 13 | pdfJsApiProvider?: PdfJsApiProvider; 14 | } 15 | 16 | export const PdfJsApiContext = React.createContext({}); 17 | -------------------------------------------------------------------------------- /packages/get-file/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type DownloadProps } from './Download'; 12 | export { DownloadIcon } from './DownloadIcon'; 13 | export { type DownloadMenuItemProps } from './DownloadMenuItem'; 14 | export * from './getFilePlugin'; 15 | export { type RenderDownloadProps } from './types/RenderDownloadProps'; 16 | -------------------------------------------------------------------------------- /packages/highlight/src/types/RenderHighlightsProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { type HighlightArea } from './HighlightArea'; 11 | 12 | export interface RenderHighlightsProps { 13 | getCssProperties(area: HighlightArea, rotation: number): React.CSSProperties; 14 | pageIndex: number; 15 | rotation: number; 16 | } 17 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core-initial-page-different-dimensions/index.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => ( 5 |
14 | 15 |
16 | ); 17 | 18 | export default IndexPage; 19 | -------------------------------------------------------------------------------- /packages/core/src/loader/FailureState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { LoadError } from './LoadError'; 10 | import { LoadingStatus } from './LoadingStatus'; 11 | 12 | export class FailureState extends LoadingStatus { 13 | public error: LoadError; 14 | 15 | constructor(error: LoadError) { 16 | super(); 17 | this.error = error; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/styles/viewer.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .viewer { 10 | background-color: hsl(var(--rpv-background)); 11 | color: hsl(var(--rpv-foreground)); 12 | /* 13 | * Fix the issue where its children doesn't take the full height of the parent 14 | * that has a `min-height` property 15 | */ 16 | min-height: inherit; 17 | } 18 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/drop/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/open/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/search/src/constants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type NormalizedKeyword } from './types/NormalizedKeyword'; 10 | 11 | // `new RegExp('')` will treat the source as `(?:)` which is not an empty string 12 | export const EMPTY_KEYWORD_REGEXP: NormalizedKeyword = { 13 | keyword: '', 14 | regExp: new RegExp(' '), 15 | wholeWords: false, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/zoom/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/bookmark/src/RightArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const RightArrowIcon: React.FC = () => ( 13 | 14 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /packages/bookmark/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/get-file/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/highlight/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/print/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/rotate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/search/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/thumbnail/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/toolbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /changelogs/v3.3.3.md: -------------------------------------------------------------------------------- 1 | ## v3.3.3 2 | 3 | **Improvements** 4 | 5 | - Clicking `Enter` automatically jumps to the next match when being focused on the keyword field 6 | - Support documents which are optimized for web. Users don't have to wait the full document loaded to see the first page. 7 | 8 | **Bug fixes** 9 | 10 | - Automatically scroll to the thumbnail of the initial page when it's set 11 | - The text might not be selectable if a plugin registers the `renderPageLayer` method 12 | - There is a page that is not rendered even it is visible when users zoom the document 13 | -------------------------------------------------------------------------------- /packages/attachment/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/bookmark/src/types/IsBookmarkExpanded.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export type IsBookmarkExpanded = ({ 12 | bookmark, 13 | depth, 14 | doc, 15 | index, 16 | }: { 17 | bookmark: PdfJs.Outline; 18 | depth: number; 19 | doc: PdfJs.PdfDocument; 20 | index: number; 21 | }) => boolean; 22 | -------------------------------------------------------------------------------- /packages/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/full-screen/src/styles/overlay.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .overlay { 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | 14 | height: 100%; 15 | width: 100%; 16 | 17 | align-items: center; 18 | display: flex; 19 | justify-content: center; 20 | 21 | background-color: hsl(var(--rpv-background)); 22 | z-index: 1; 23 | } 24 | -------------------------------------------------------------------------------- /packages/full-screen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/properties/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/scroll-mode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/search/src/types/Match.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export interface Match { 10 | keyword: RegExp; 11 | // The index of match in the page 12 | // Each page may have multiple matches 13 | matchIndex: number; 14 | pageIndex: number; 15 | pageText: string; 16 | // Position of matching 17 | startIndex: number; 18 | endIndex: number; 19 | } 20 | -------------------------------------------------------------------------------- /packages/selection-mode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /changelogs/v3.1.2.md: -------------------------------------------------------------------------------- 1 | ## v3.1.2 2 | 3 | **Bug fixes** 4 | 5 | - Don't highlight spaces between words when searching for a keyword 6 | - The `clearHighlights` and `clearKeyword()` functions provided by the `search` plugin should remove all highlights when the keyword is empty 7 | - The current highlight is lost after zooming the document 8 | - The `jumpToMatch()` function provided by the `search` plugin does not properly highlight keyword when the page is not in the virtual list 9 | - The `ScrollModePluginProps` type isn't defined in the type definitions of the `toolbar` plugin 10 | -------------------------------------------------------------------------------- /packages/highlight/src/structs/SelectionRange.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum SelectionRange { 10 | // User selects text from the same div 11 | SameDiv = 'SameDiv', 12 | // User selects text from different divs in a single page 13 | DifferentDivs = 'DifferentDivs', 14 | // User selects text in multiple pages 15 | DifferentPages = 'DifferentPages', 16 | } 17 | -------------------------------------------------------------------------------- /packages/locale-switcher/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/page-navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src", "../../@types"], 3 | "exclude": ["./dist", "./lib"], 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "lib": ["DOM", "ESNext"], 8 | "module": "ESNext", 9 | "moduleResolution": "Node", 10 | "removeComments": true, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "skipLibCheck": true, 14 | "target": "ES2015", 15 | "types": ["node", "jest", "@testing-library/jest-dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core/index.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => { 5 | return ( 6 |
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default IndexPage; 21 | -------------------------------------------------------------------------------- /packages/core/src/loader/CompletedState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '../types/PdfJs'; 10 | import { LoadingStatus } from './LoadingStatus'; 11 | 12 | export class CompletedState extends LoadingStatus { 13 | public doc: PdfJs.PdfDocument; 14 | 15 | constructor(doc: PdfJs.PdfDocument) { 16 | super(); 17 | this.doc = doc; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/utils/classNames.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const classNames = (classes: { [clazz: string]: boolean }): string => { 10 | const result: string[] = []; 11 | 12 | Object.keys(classes).forEach((clazz) => { 13 | if (clazz && classes[clazz]) { 14 | result.push(clazz); 15 | } 16 | }); 17 | 18 | return result.join(' '); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/default-layout/src/styles/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | @import '../../../default-layout/lib/styles/default-layout.css'; 10 | 11 | /* Include other plugins */ 12 | @import '../../../attachment/lib/styles/index.css'; 13 | @import '../../../bookmark/lib/styles/index.css'; 14 | @import '../../../thumbnail/lib/styles/index.css'; 15 | @import '../../../toolbar/lib/styles/index.css'; 16 | -------------------------------------------------------------------------------- /packages/properties/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { InfoIcon } from './InfoIcon'; 12 | export { type ShowPropertiesProps } from './ShowProperties'; 13 | export * from './propertiesPlugin'; 14 | export { type ShowPropertiesMenuItemProps } from './propertiesPlugin'; 15 | export { type RenderShowPropertiesProps } from './types/RenderShowPropertiesProps'; 16 | -------------------------------------------------------------------------------- /packages/core/src/icons/ParagraphIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const ParagraphIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/core/src/types/Slot.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | 11 | export interface Attr extends React.HTMLAttributes { 12 | 'data-testid'?: string; 13 | ref?: React.MutableRefObject; 14 | } 15 | 16 | export interface Slot { 17 | attrs?: Attr; 18 | children?: React.ReactNode; 19 | subSlot?: Slot; 20 | } 21 | -------------------------------------------------------------------------------- /packages/search/src/wrap.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export const wrap = (ele: Node, startOffset: number, endOffset: number): HTMLElement => { 10 | const range = new Range(); 11 | range.setStart(ele, startOffset); 12 | range.setEnd(ele, endOffset); 13 | 14 | const wrapper = document.createElement('span'); 15 | range.surroundContents(wrapper); 16 | return wrapper; 17 | }; 18 | -------------------------------------------------------------------------------- /changelogs/v2.3.2.md: -------------------------------------------------------------------------------- 1 | ## v2.3.2 2 | 3 | **Improvements** 4 | 5 | - Lazy load the document. The PDF document will be loaded if the viewer container is visible in the viewport. 6 | 7 | **Bug fixes** 8 | Fix a bug that could happen when we load multiple documents by changing `fileUrl`. 9 | In that case, you may see the error message 10 | 11 | - `Worker was destroyed` 12 | - `Cannot read property 'sendWithPromise' of null` 13 | 14 | This version also fixes a potential memory leaks reported by React DevTools when we try to load new document even if the current document isn't rendered completely. 15 | -------------------------------------------------------------------------------- /packages/bookmark/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type Destination, type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | // Manage the expanded/collapsed state of each bookmark item 13 | bookmarkExpandedMap: Map; 14 | doc?: PdfJs.PdfDocument; 15 | jumpToDestination?(destination: Destination): void; 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/styles/primaryButton.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .button { 10 | background-color: hsl(var(--rpv-primary)); 11 | border: none; 12 | border-radius: calc(var(--rpv-radius) - 2px); 13 | color: hsl(var(--rpv-primary-foreground)); 14 | cursor: pointer; 15 | height: 2rem; 16 | padding: 0 1rem; 17 | } 18 | 19 | .buttonRtl { 20 | direction: rtl; 21 | } 22 | -------------------------------------------------------------------------------- /packages/thumbnail/src/types/RenderCurrentPageLabelProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | 11 | export interface RenderCurrentPageLabelProps { 12 | currentPage: number; 13 | numPages: number; 14 | pageIndex: number; 15 | pageLabel: string; 16 | } 17 | 18 | export type RenderCurrentPageLabel = (props: RenderCurrentPageLabelProps) => React.ReactElement; 19 | -------------------------------------------------------------------------------- /changelogs/v2.4.3.md: -------------------------------------------------------------------------------- 1 | ## v2.4.3 2 | 3 | **Bug fix** 4 | 5 | - Clicking on an internal link jumps to an incorrect page (one page after the destination one) 6 | 7 | **Improvements** 8 | 9 | - Automatically scroll to the thumbnail that represents the current page 10 | - Display the progress properly when printing a big document 11 | - Improve the performance of preparing pages for print such as using a shared `canvas` element for all pages 12 | - Keep showing a spinner until the canvas layer is rendered completely 13 | - The print plugin supports documents whose pages have different dimensions 14 | -------------------------------------------------------------------------------- /packages/bookmark/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { DownArrowIcon } from './DownArrowIcon'; 12 | export { RightArrowIcon } from './RightArrowIcon'; 13 | export * from './bookmarkPlugin'; 14 | export { type IsBookmarkExpanded } from './types/IsBookmarkExpanded'; 15 | export { type RenderBookmarkItem, type RenderBookmarkItemProps } from './types/RenderBookmarkItemProps'; 16 | -------------------------------------------------------------------------------- /packages/highlight/src/types/SelectionData.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type DivText } from './DivText'; 10 | 11 | export interface SelectionData { 12 | divTexts: DivText[]; 13 | selectedText: string; 14 | startPageIndex: number; 15 | endPageIndex: number; 16 | startOffset: number; 17 | startDivIndex: number; 18 | endOffset: number; 19 | endDivIndex: number; 20 | } 21 | -------------------------------------------------------------------------------- /packages/bookmark/src/DownArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DownArrowIcon: React.FC = () => { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/toolbar/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { MoreActionsPopover } from './MoreActionsPopover'; 12 | export { MoreIcon } from './MoreIcon'; 13 | export { type ToolbarProps } from './Toolbar'; 14 | export * from './toolbarPlugin'; 15 | export { type ToolbarSlot } from './types/ToolbarSlot'; 16 | export { type TransformToolbarSlot } from './types/TransformToolbarSlot'; 17 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core-different-dimensions/index.tsx: -------------------------------------------------------------------------------- 1 | import { Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => { 5 | return ( 6 |
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default IndexPage; 21 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/DualPageViewModeIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DualPageViewModeIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /demo/nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@react-pdf-viewer/nextjs-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "copyworker": "cp ../../node_modules/pdfjs-dist/build/pdf.worker.min.mjs public", 7 | "build": "npm run copyworker && next build", 8 | "dev": "next dev" 9 | }, 10 | "dependencies": { 11 | "@react-pdf-viewer/core": "*", 12 | "@react-pdf-viewer/default-layout": "*", 13 | "next": "^14.2.4" 14 | }, 15 | "devDependencies": { 16 | "serve": "^14.2.3", 17 | "ts-loader": "^9.5.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/full-screen/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { FullScreenMode, SpecialZoomLevel } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | enterFullScreenMode(target: HTMLElement): void; 13 | exitFullScreenMode(): void; 14 | fullScreenMode: FullScreenMode; 15 | getPagesContainer?(): HTMLElement; 16 | zoom(scale: number | SpecialZoomLevel): void; 17 | } 18 | -------------------------------------------------------------------------------- /packages/search/src/NextIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const NextIcon: React.FC = () => ( 13 | 14 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/core/src/types/RenderProtectedView.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { PasswordStatus } from '../structs/PasswordStatus'; 11 | 12 | export interface RenderProtectedViewProps { 13 | passwordStatus: PasswordStatus; 14 | verifyPassword: (password: string) => void; 15 | } 16 | 17 | export type RenderProtectedView = (renderProps: RenderProtectedViewProps) => React.ReactElement; 18 | -------------------------------------------------------------------------------- /packages/selection-mode/src/styles/selectionMode.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .grab { 10 | cursor: grab; 11 | } 12 | .grab :not(input), 13 | .grab :not(select), 14 | .grab :not(textarea) { 15 | cursor: grab !important; 16 | } 17 | 18 | .grabbing { 19 | cursor: grabbing; 20 | } 21 | .grabbing :not(input), 22 | .grabbing :not(select), 23 | .grabbing :not(textarea) { 24 | cursor: grabbing !important; 25 | } 26 | -------------------------------------------------------------------------------- /packages/page-navigation/src/NextIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const NextIcon: React.FC = () => ( 13 | 14 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/search/src/PreviousIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const PreviousIcon: React.FC = () => ( 13 | 14 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/core/src/icons/KeyIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const KeyIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/highlight/src/MessageIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const MessageIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/page-navigation/src/PreviousIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const PreviousIcon: React.FC = () => ( 13 | 14 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/search/src/getCssProperties.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { type HighlightArea } from './types/RenderHighlightsProps'; 11 | 12 | export const getCssProperties = (area: HighlightArea): React.CSSProperties => { 13 | return { 14 | left: `${area.left}%`, 15 | top: `${area.top}%`, 16 | height: `${area.height}%`, 17 | width: `${area.width}%`, 18 | }; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/bookmark/src/styles/bookmarkListLoader.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .empty { 10 | height: 100%; 11 | overflow: auto; 12 | padding: 0.5rem 0; 13 | text-align: center; 14 | width: 100%; 15 | } 16 | .emptyRtl { 17 | direction: rtl; 18 | } 19 | 20 | .container { 21 | height: 100%; 22 | overflow: auto; 23 | padding: 0.5rem 0; 24 | width: 100%; 25 | } 26 | .containerRtl { 27 | direction: rtl; 28 | } 29 | -------------------------------------------------------------------------------- /packages/thumbnail/src/styles/thumbnailContainer.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | align-items: center; 11 | box-shadow: 12 | rgba(0, 0, 0, 0) 0px 0px 0px 0px, 13 | rgba(0, 0, 0, 0) 0px 0px 0px 0px, 14 | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 15 | rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; 16 | display: flex; 17 | justify-content: center; 18 | margin: 0 auto; 19 | position: relative; 20 | } 21 | -------------------------------------------------------------------------------- /demo/webpack/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Provider, type PdfJsApiProvider } from '@react-pdf-viewer/core'; 2 | import * as PdfJs from 'pdfjs-dist'; 3 | import React from 'react'; 4 | import { createRoot } from 'react-dom/client'; 5 | import App from './App'; 6 | import './styles.css'; 7 | 8 | const apiProvider = PdfJs as unknown as PdfJsApiProvider; 9 | 10 | const rootElement = document.getElementById('root'); 11 | const root = createRoot(rootElement); 12 | root.render( 13 | 14 | 15 | 16 | 17 | , 18 | ); 19 | -------------------------------------------------------------------------------- /packages/core/src/portal/StackContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const StackContext = React.createContext<{ 14 | currentIndex: number; 15 | decreaseNumStacks: () => void; 16 | increaseNumStacks: () => void; 17 | numStacks: number; 18 | }>({ 19 | currentIndex: 0, 20 | decreaseNumStacks: () => {}, 21 | increaseNumStacks: () => {}, 22 | numStacks: 0, 23 | }); 24 | -------------------------------------------------------------------------------- /packages/highlight/src/types/RenderHighlightContentProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type HighlightArea } from './HighlightArea'; 10 | import { type SelectionData } from './SelectionData'; 11 | 12 | export interface RenderHighlightContentProps { 13 | highlightAreas: HighlightArea[]; 14 | previewImage: string; 15 | selectedText: string; 16 | selectionRegion: HighlightArea; 17 | selectionData?: SelectionData; 18 | cancel(): void; 19 | } 20 | -------------------------------------------------------------------------------- /packages/search/src/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const SearchIcon: React.FC = () => ( 13 | 14 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/core/src/icons/NoteIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const NoteIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/selection-mode/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { HandToolIcon } from './HandToolIcon'; 12 | export { type SwitchSelectionModeProps } from './SwitchSelectionMode'; 13 | export { TextSelectionIcon } from './TextSelectionIcon'; 14 | export * from './selectionModePlugin'; 15 | export { SelectionMode } from './structs/SelectionMode'; 16 | export { type RenderSwitchSelectionModeProps } from './types/RenderSwitchSelectionModeProps'; 17 | -------------------------------------------------------------------------------- /packages/thumbnail/src/SpinnerContext.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import { Spinner } from '@react-pdf-viewer/core'; 12 | import * as React from 'react'; 13 | 14 | export interface SpinnerContextProps { 15 | renderSpinner: () => React.ReactElement; 16 | } 17 | 18 | export const defaultSpinner = () => ; 19 | 20 | export const SpinnerContext = React.createContext({ 21 | renderSpinner: defaultSpinner, 22 | }); 23 | -------------------------------------------------------------------------------- /packages/zoom/src/styles/zoomPopover.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .target { 10 | align-items: center; 11 | display: flex; 12 | } 13 | 14 | .scaleLtr { 15 | margin-right: 0.25rem; 16 | } 17 | .scaleRtl { 18 | margin-left: 0.25rem; 19 | } 20 | 21 | .arrow { 22 | border-color: hsl(var(--rpv-muted-foreground)) transparent transparent; 23 | border-style: solid; 24 | border-width: 0.5rem 0.25rem 0; 25 | height: 0; 26 | width: 0; 27 | } 28 | -------------------------------------------------------------------------------- /packages/core/src/annotations/AnnotationType.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum AnnotationType { 10 | Text = 1, 11 | Link = 2, 12 | FreeText = 3, 13 | Line = 4, 14 | Square = 5, 15 | Circle = 6, 16 | Polygon = 7, 17 | Polyline = 8, 18 | Highlight = 9, 19 | Underline = 10, 20 | Squiggly = 11, 21 | StrikeOut = 12, 22 | Stamp = 13, 23 | Caret = 14, 24 | Ink = 15, 25 | Popup = 16, 26 | FileAttachment = 17, 27 | } 28 | -------------------------------------------------------------------------------- /packages/core/src/hooks/useIsMounted.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const useIsMounted = (): React.MutableRefObject => { 14 | const isMountedRef = React.useRef(false); 15 | 16 | React.useEffect(() => { 17 | isMountedRef.current = true; 18 | return () => { 19 | isMountedRef.current = false; 20 | }; 21 | }, []); 22 | 23 | return isMountedRef; 24 | }; 25 | -------------------------------------------------------------------------------- /packages/thumbnail/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { ThumbnailDirection } from './structs/ThumbnailDirection'; 12 | export * from './thumbnailPlugin'; 13 | export { type CoverProps } from './types/CoverProps'; 14 | export { type RenderCurrentPageLabel, type RenderCurrentPageLabelProps } from './types/RenderCurrentPageLabelProps'; 15 | export { type RenderThumbnailItem, type RenderThumbnailItemProps } from './types/RenderThumbnailItemProps'; 16 | -------------------------------------------------------------------------------- /changelogs/v3.3.1.md: -------------------------------------------------------------------------------- 1 | ## v3.3.1 2 | 3 | **New feature** 4 | 5 | - The thumbnail plugin adds new option for customizing the width of thumbnails: 6 | 7 | ```tsx 8 | const thumbnailPluginInstance = thumbnailPlugin({ 9 | thumbnailWidth: 150, 10 | }); 11 | 12 | // Use with the default layout plugin 13 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 14 | thumbnailPlugin: { 15 | thumbnailWidth: 150, 16 | }, 17 | }); 18 | ``` 19 | 20 | **Bug fix** 21 | 22 | - Support React 18 strict mode 23 | 24 | ```tsx 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /packages/highlight/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type Destination } from '@react-pdf-viewer/core'; 10 | import { Trigger } from '../structs/Trigger'; 11 | import { type HighlightState } from './HighlightState'; 12 | 13 | export interface StoreProps { 14 | jumpToDestination?(destination: Destination): void; 15 | getPagesContainer?(): HTMLElement; 16 | highlightState: HighlightState; 17 | rotation?: number; 18 | trigger: Trigger; 19 | } 20 | -------------------------------------------------------------------------------- /packages/page-navigation/src/types/GoToPage.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | 11 | export interface GoToPageMenuItemProps { 12 | onClick: () => void; 13 | } 14 | 15 | export interface RenderGoToPageProps { 16 | isDisabled: boolean; 17 | onClick: () => void; 18 | } 19 | 20 | export type RenderGoToPage = (props: RenderGoToPageProps) => React.ReactElement; 21 | 22 | export interface GoToPageProps { 23 | children?: RenderGoToPage; 24 | } 25 | -------------------------------------------------------------------------------- /packages/scroll-mode/src/DualPageCoverViewModeIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DualPageCoverViewModeIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/core/src/hooks/useLockScroll.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const useLockScroll = (): void => { 14 | React.useEffect(() => { 15 | const originalStyle = window.getComputedStyle(document.body).overflow; 16 | document.body.style.overflow = 'hidden'; 17 | 18 | return (): void => { 19 | document.body.style.overflow = originalStyle; 20 | }; 21 | }, []); 22 | }; 23 | -------------------------------------------------------------------------------- /packages/open/src/OpenFileIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const OpenFileIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/core/src/icons/ResizeIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const ResizeIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/core/src/loader/LoadError.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | // Represents the error in case the document can't be loaded 10 | export interface LoadError { 11 | message?: string; 12 | // Some possible values for `name` are 13 | // - AbortException 14 | // - FormatError 15 | // - InvalidPDFException 16 | // - MissingPDFException 17 | // - PasswordException 18 | // - UnexpectedResponseException 19 | // - UnknownErrorException 20 | name?: string; 21 | } 22 | -------------------------------------------------------------------------------- /packages/full-screen/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type EnterFullScreenProps, type RenderEnterFullScreenProps } from './EnterFullScreen'; 12 | export { type EnterFullScreenMenuItemProps } from './EnterFullScreenMenuItem'; 13 | export { type RenderExitFullScreenProps } from './ExitFullScreen'; 14 | export { ExitFullScreenIcon } from './ExitFullScreenIcon'; 15 | export { FullScreenIcon } from './FullScreenIcon'; 16 | export * from './fullScreenPlugin'; 17 | -------------------------------------------------------------------------------- /packages/rotate/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type RotateProps } from './Rotate'; 12 | export { RotateBackwardIcon } from './RotateBackwardIcon'; 13 | export { RotateForwardIcon } from './RotateForwardIcon'; 14 | export { type RotatePageProps } from './RotatePage'; 15 | export * from './rotatePlugin'; 16 | export { type RenderRotatePageProps } from './types/RenderRotatePageProps'; 17 | export { type RenderRotateProps } from './types/RenderRotateProps'; 18 | -------------------------------------------------------------------------------- /packages/highlight/src/HighlightRect.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import styles from './styles/selectedText.module.css'; 11 | import { getCssProperties } from './transformArea'; 12 | import { type HighlightArea } from './types/HighlightArea'; 13 | 14 | export const HighlightRect: React.FC<{ 15 | area: HighlightArea; 16 | rotation: number; 17 | }> = ({ area, rotation }) =>
; 18 | -------------------------------------------------------------------------------- /packages/highlight/src/styles/selectedText.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .selectedText { 10 | background-color: var(--rpv-highlight__selected-text-background-color); 11 | } 12 | 13 | .selectedEnd { 14 | display: block; 15 | 16 | /* Absolute position */ 17 | bottom: 0; 18 | left: 0; 19 | position: absolute; 20 | right: 0; 21 | top: 100%; 22 | 23 | /* Make it hidden */ 24 | z-index: -1; 25 | 26 | /* And unselectable */ 27 | user-select: none; 28 | } 29 | -------------------------------------------------------------------------------- /packages/print/src/styles/printZone.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .zone { 10 | display: none; 11 | } 12 | 13 | @media print { 14 | /* To make it work across browsers */ 15 | .htmlPrinting { 16 | height: 100%; 17 | } 18 | 19 | .bodyPrinting { 20 | height: 100%; 21 | margin: 0; 22 | } 23 | 24 | .bodyPrinting * { 25 | display: none; 26 | } 27 | 28 | .zone { 29 | display: block; 30 | height: 100%; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /demo/nextjs/pages/search-focus-keyword/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 7 | 8 | return ( 9 |
16 | 17 |
18 | ); 19 | }; 20 | 21 | export default IndexPage; 22 | -------------------------------------------------------------------------------- /packages/core/src/types/Destination.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { SpecialZoomLevel } from '../structs/SpecialZoomLevel'; 10 | 11 | export type DestinationOffsetFromViewport = (viewportWidth: number, viewportHeight: number) => number; 12 | 13 | export interface Destination { 14 | bottomOffset: number | DestinationOffsetFromViewport; 15 | label?: string; 16 | leftOffset: number | DestinationOffsetFromViewport; 17 | pageIndex: number; 18 | scaleTo?: number | SpecialZoomLevel; 19 | } 20 | -------------------------------------------------------------------------------- /packages/default-layout/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type ToolbarPluginProps, type ToolbarProps, type ToolbarSlot } from '@react-pdf-viewer/toolbar'; 12 | export { BookmarkIcon } from './BookmarkIcon'; 13 | export { FileIcon } from './FileIcon'; 14 | export { type SidebarTab } from './Sidebar'; 15 | export { ThumbnailIcon } from './ThumbnailIcon'; 16 | export * from './defaultLayoutPlugin'; 17 | export { setInitialTabFromPageMode } from './setInitialTabFromPageMode'; 18 | -------------------------------------------------------------------------------- /packages/zoom/src/ZoomOutIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const ZoomOutIcon: React.FC = () => ( 13 | 14 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/core/src/structs/Position.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | export enum Position { 10 | TopLeft = 'TOP_LEFT', 11 | TopCenter = 'TOP_CENTER', 12 | TopRight = 'TOP_RIGHT', 13 | RightTop = 'RIGHT_TOP', 14 | RightCenter = 'RIGHT_CENTER', 15 | RightBottom = 'RIGHT_BOTTOM', 16 | BottomLeft = 'BOTTOM_LEFT', 17 | BottomCenter = 'BOTTOM_CENTER', 18 | BottomRight = 'BOTTOM_RIGHT', 19 | LeftTop = 'LEFT_TOP', 20 | LeftCenter = 'LEFT_CENTER', 21 | LeftBottom = 'LEFT_BOTTOM', 22 | } 23 | -------------------------------------------------------------------------------- /packages/get-file/src/DownloadIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DownloadIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /demo/nextjs/pages/default-layout-different-dimensions/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 7 | 8 | return ( 9 |
16 | 17 |
18 | ); 19 | }; 20 | 21 | export default IndexPage; 22 | -------------------------------------------------------------------------------- /demo/nextjs/pages/default-layout-rtl/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 7 | 8 | return ( 9 |
17 | 18 |
19 | ); 20 | }; 21 | 22 | export default IndexPage; 23 | -------------------------------------------------------------------------------- /demo/nextjs/pages/default-layout/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 7 | 8 | return ( 9 |
17 | 18 |
19 | ); 20 | }; 21 | 22 | export default IndexPage; 23 | -------------------------------------------------------------------------------- /packages/full-screen/src/FullScreenIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const FullScreenIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/full-screen/src/ExitFullScreenIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const ExitFullScreenIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/highlight/src/types/RenderHighlightTargetProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type HighlightArea } from './HighlightArea'; 10 | import { type SelectionData } from './SelectionData'; 11 | 12 | export interface RenderHighlightTargetProps { 13 | highlightAreas: HighlightArea[]; 14 | previewImage: string; 15 | selectedText: string; 16 | selectionRegion: HighlightArea; 17 | selectionData?: SelectionData; 18 | cancel(): void; 19 | // Switch to the hightlighting state 20 | toggle(): void; 21 | } 22 | -------------------------------------------------------------------------------- /packages/zoom/src/ZoomInIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const ZoomInIcon: React.FC = () => ( 13 | 14 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /packages/core/src/hooks/useRunOnce.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; 13 | 14 | export const useRunOnce = (cb: () => void, condition: boolean) => { 15 | const isCalledRef = React.useRef(false); 16 | 17 | useIsomorphicLayoutEffect(() => { 18 | if (condition && !isCalledRef.current) { 19 | isCalledRef.current = true; 20 | cb(); 21 | } 22 | }, [cb, condition]); 23 | }; 24 | -------------------------------------------------------------------------------- /packages/open/src/styles/openInput.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .container { 10 | position: relative; 11 | } 12 | 13 | .input { 14 | /* Hide it */ 15 | display: none; 16 | 17 | bottom: 0; 18 | cursor: pointer; 19 | height: 100%; 20 | left: 0; 21 | opacity: 0; 22 | position: absolute; 23 | right: 0; 24 | top: 0; 25 | width: 100%; 26 | 27 | /* Fix an issue where the button covers other elements on Safari */ 28 | &::-webkit-file-upload-button { 29 | width: 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/page-navigation/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type Destination, type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | currentPage?: number; 13 | doc?: PdfJs.PdfDocument; 14 | jumpToDestination?(destination: Destination): void; 15 | jumpToNextDestination?(): void; 16 | jumpToNextPage(): void; 17 | jumpToPage?(pageIndex: number): void; 18 | jumpToPreviousDestination?(): void; 19 | jumpToPreviousPage(): void; 20 | numberOfPages?: number; 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "esModuleInterop": true, 5 | "isolatedModules": true, 6 | "jsx": "react", 7 | "module": "esnext", 8 | "moduleResolution": "node", 9 | "removeComments": true, 10 | "resolveJsonModule": true, 11 | "target": "es5", 12 | "baseUrl": ".", 13 | "paths": { 14 | "@react-pdf-viewer/*": ["packages/*/src"], 15 | "*": ["node_modules", "packages"] 16 | }, 17 | "types": ["expect-puppeteer", "jest-environment-puppeteer", "puppeteer", "@testing-library/jest-dom"] 18 | }, 19 | "include": ["./@types"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /packages/core/src/styles/progressBar.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .bar { 10 | background-color: hsl(var(--rpv-secondary)); 11 | border-radius: 9999px; 12 | padding: 0.125rem; 13 | } 14 | .barRtl { 15 | direction: rtl; 16 | } 17 | 18 | .progress { 19 | align-items: center; 20 | background-color: hsl(var(--rpv-primary)); 21 | border-radius: 9999px; 22 | color: hsl(var(--rpv-primary-foreground)); 23 | display: flex; 24 | font-size: 0.75rem; 25 | justify-content: center; 26 | height: 0.75rem; 27 | } 28 | -------------------------------------------------------------------------------- /demo/nextjs/pages/default-layout-initial-page/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 7 | 8 | return ( 9 |
17 | 18 |
19 | ); 20 | }; 21 | 22 | export default IndexPage; 23 | -------------------------------------------------------------------------------- /packages/search/src/calculateOffset.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type Offset } from '@react-pdf-viewer/core'; 10 | 11 | export const calculateOffset = (children: HTMLElement, parent: HTMLElement): Offset => { 12 | let top = children.offsetTop; 13 | let left = children.offsetLeft; 14 | 15 | let p = children.parentElement; 16 | while (p && p !== parent) { 17 | top += p.offsetTop; 18 | left += p.offsetLeft; 19 | p = p.parentElement; 20 | } 21 | return { 22 | left, 23 | top, 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/thumbnail/src/types/StoreProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { RotateDirection, ViewMode, type PdfJs } from '@react-pdf-viewer/core'; 10 | 11 | export interface StoreProps { 12 | currentPage?: number; 13 | doc?: PdfJs.PdfDocument; 14 | pagesRotation?: Map; 15 | pageHeight?: number; 16 | pageWidth?: number; 17 | jumpToPage?(pageIndex: number): void; 18 | rotatePage(pageIndex: number, direction: RotateDirection): void; 19 | rotatedPage?: number; 20 | rotation?: number; 21 | viewMode: ViewMode; 22 | } 23 | -------------------------------------------------------------------------------- /packages/core/src/icons/CommentIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import * as React from 'react'; 10 | import { Icon } from './Icon'; 11 | 12 | export const CommentIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/core/src/styles/tooltipBody.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .body { 10 | background-color: hsl(var(--rpv-primary)); 11 | border-color: transparent; 12 | border-radius: var(--rpv-radius); 13 | color: hsl(var(--rpv-primary-foreground)); 14 | left: 0; 15 | max-width: 20rem; 16 | position: fixed; 17 | text-align: center; 18 | top: 0; 19 | z-index: 9999; 20 | } 21 | .bodyRtl { 22 | direction: rtl; 23 | } 24 | 25 | .arrow { 26 | background-color: inherit; 27 | } 28 | 29 | .content { 30 | padding: 0.5rem; 31 | } 32 | -------------------------------------------------------------------------------- /packages/search/src/styles/highlight.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .highlights { 10 | left: 0; 11 | position: absolute; 12 | top: 0; 13 | /* Take the full size */ 14 | height: 100%; 15 | width: 100%; 16 | } 17 | 18 | .highlight { 19 | background-color: hsl(var(--rpv-primary) / 0.4); 20 | border-radius: calc(var(--rpv-radius) - 4px); 21 | position: absolute; 22 | /* Display on top of the text layer */ 23 | z-index: 1; 24 | } 25 | 26 | .highlightCurrent { 27 | background-color: hsl(var(--rpv-highlight) / 0.4); 28 | } 29 | -------------------------------------------------------------------------------- /packages/theme/src/LightIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const LightIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/theme/src/DarkIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DarkIcon: React.FC = () => ( 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /changelogs/v1.3.0.md: -------------------------------------------------------------------------------- 1 | ## v1.3.0 2 | 3 | **New features** 4 | 5 | Expose all the buttons from the more actions popover to the toolbar. 6 | `ToolbarSlot` now includes 7 | 8 | - `goToFirstPageButton`: the button to go to the first page 9 | - `goToLastPageButton`: go to the last page 10 | - `rotateClockwiseButton`: rotate the document 11 | - `rotateCounterclockwiseButton`: rotate counterclockwise the document 12 | - `textSelectionButton`: switch to the text selection mode 13 | - `handToolButton`: switch to the hand tool mode 14 | - `verticalScrollingButton`: scroll the document vertically 15 | - `horizontalScrollingButton`: scroll the document horizontally 16 | - `wrappedScrollingButton`: display pages as a grid 17 | - `documentPropertiesButton`: show the document properties 18 | -------------------------------------------------------------------------------- /packages/core/src/types/PdfJsApiProvider.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from './PdfJs'; 10 | 11 | export interface PdfJsApiProvider { 12 | getDocument(params: PdfJs.GetDocumentParams): PdfJs.LoadingTask; 13 | 14 | // Worker 15 | PDFWorker: PdfJs.PDFWorkerConstructor; 16 | GlobalWorkerOptions: PdfJs.GlobalWorker; 17 | 18 | // Loading task 19 | PasswordResponses: PdfJs.PasswordResponsesValue; 20 | 21 | // Render SVG 22 | SVGGraphics: PdfJs.SVGGraphicsConstructor; 23 | 24 | // Render text layer 25 | TextLayer: PdfJs.TextLayer; 26 | } 27 | -------------------------------------------------------------------------------- /packages/core/src/utils/mergeRefs.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export const mergeRefs = ( 14 | refs: Array | React.LegacyRef | null>, 15 | ): React.RefCallback => { 16 | return (value) => { 17 | refs.forEach((ref) => { 18 | if (typeof ref === 'function') { 19 | ref(value); 20 | } else if (ref != null) { 21 | (ref as React.MutableRefObject).current = value; 22 | } 23 | }); 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/page-navigation/src/UpArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const UpArrowIcon: React.FC = () => ( 13 | 14 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/toolbar/src/styles/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | @import '../../../toolbar/lib/styles/toolbar.css'; 10 | 11 | /* Include other plugins */ 12 | @import '../../../full-screen/lib/styles/index.css'; 13 | @import '../../../open/lib/styles/index.css'; 14 | @import '../../../page-navigation/lib/styles/index.css'; 15 | @import '../../../print/lib/styles/index.css'; 16 | @import '../../../properties/lib/styles/index.css'; 17 | @import '../../../search/lib/styles/index.css'; 18 | @import '../../../selection-mode/lib/styles/index.css'; 19 | @import '../../../zoom/lib/styles/index.css'; 20 | -------------------------------------------------------------------------------- /packages/core/src/theme/ThemeContext.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | 13 | export enum TextDirection { 14 | RightToLeft = 'RTL', 15 | LeftToRight = 'LTR', 16 | } 17 | 18 | export interface ThemeContextProps { 19 | currentTheme: string; 20 | direction?: TextDirection; 21 | setCurrentTheme: (theme: string) => void; 22 | } 23 | 24 | export const ThemeContext = React.createContext({ 25 | currentTheme: 'light', 26 | direction: TextDirection.LeftToRight, 27 | setCurrentTheme: () => {}, 28 | }); 29 | -------------------------------------------------------------------------------- /packages/page-navigation/src/DownArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const DownArrowIcon: React.FC = () => ( 13 | 14 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/print/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { type PrintProps } from './Print'; 12 | export { PrintIcon } from './PrintIcon'; 13 | export { type PrintMenuItemProps } from './PrintMenuItem'; 14 | export { getAllPagesNumbers } from './getAllPagesNumbers'; 15 | export { getCustomPagesNumbers } from './getCustomPagesNumbers'; 16 | export { getEvenPagesNumbers } from './getEvenPagesNumbers'; 17 | export { getOddPagesNumbers } from './getOddPagesNumbers'; 18 | export * from './printPlugin'; 19 | export { type RenderPrintProps } from './types/RenderPrintProps'; 20 | -------------------------------------------------------------------------------- /demo/nextjs/pages/core-initial-page-dual-page/index.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollMode, SpecialZoomLevel, ViewMode, Viewer } from '@react-pdf-viewer/core'; 2 | import * as React from 'react'; 3 | 4 | const IndexPage = () => ( 5 |
14 | 21 |
22 | ); 23 | 24 | export default IndexPage; 25 | -------------------------------------------------------------------------------- /packages/core/src/loader/AskForPasswordState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { LoadingStatus } from './LoadingStatus'; 10 | import { PasswordStatus } from '../structs/PasswordStatus'; 11 | 12 | export class AskForPasswordState extends LoadingStatus { 13 | public verifyPassword: (password: string) => void; 14 | public passwordStatus: PasswordStatus; 15 | 16 | constructor(verifyPassword: (password: string) => void, passwordStatus: PasswordStatus) { 17 | super(); 18 | this.verifyPassword = verifyPassword; 19 | this.passwordStatus = passwordStatus; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demo/nextjs/pages/default-layout-initial-tab/index.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 | const IndexPage = () => { 6 | const defaultLayoutPluginInstance = defaultLayoutPlugin({ 7 | setInitialTab: () => Promise.resolve(0), 8 | }); 9 | 10 | return ( 11 |
19 | 20 |
21 | ); 22 | }; 23 | 24 | export default IndexPage; 25 | -------------------------------------------------------------------------------- /packages/core/src/styles/button.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | .button { 10 | background-color: hsl(var(--rpv-secondary)); 11 | border: none; 12 | border-radius: calc(var(--rpv-radius) - 2px); 13 | box-shadow: 14 | rgba(0, 0, 0, 0) 0px 0px 0px 0px, 15 | rgba(0, 0, 0, 0) 0px 0px 0px 0px, 16 | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 17 | rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; 18 | color: hsl(var(--rpv-secondary-foreground)); 19 | cursor: pointer; 20 | height: 2rem; 21 | padding: 0 1rem; 22 | } 23 | 24 | .buttonRtl { 25 | direction: rtl; 26 | } 27 | -------------------------------------------------------------------------------- /packages/core/src/utils/isSameUrl.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { type PdfJs } from '../types/PdfJs'; 10 | 11 | // Return `true` if `a` is the same as `b` 12 | export const isSameUrl = (a: PdfJs.FileData, b: PdfJs.FileData): boolean => { 13 | const typeA = typeof a; 14 | const typeB = typeof b; 15 | 16 | if (typeA === 'string' && typeB === 'string' && a === b) { 17 | return true; 18 | } 19 | if (typeA === 'object' && typeB === 'object') { 20 | return a.length === b.length && (a as Uint8Array).every((v, i) => v === b[i]); 21 | } 22 | return false; 23 | }; 24 | -------------------------------------------------------------------------------- /packages/highlight/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | export { MessageIcon } from './MessageIcon'; 12 | export * from './highlightPlugin'; 13 | export { Trigger } from './structs/Trigger'; 14 | export { type HighlightArea } from './types/HighlightArea'; 15 | export { type RenderHighlightContentProps } from './types/RenderHighlightContentProps'; 16 | export { type RenderHighlightTargetProps } from './types/RenderHighlightTargetProps'; 17 | export { type RenderHighlightsProps } from './types/RenderHighlightsProps'; 18 | export { type SelectionData } from './types/SelectionData'; 19 | -------------------------------------------------------------------------------- /packages/default-layout/src/FileIcon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | import { Icon } from '@react-pdf-viewer/core'; 10 | import * as React from 'react'; 11 | 12 | export const FileIcon: React.FC = () => ( 13 | 14 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/core/src/localization/LocalizationContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A React component to view a PDF document 3 | * 4 | * @see https://react-pdf-viewer.dev 5 | * @license https://react-pdf-viewer.dev/license 6 | * @copyright 2019-2024 Nguyen Huu Phuoc 7 | */ 8 | 9 | 'use client'; 10 | 11 | import * as React from 'react'; 12 | import { type LocalizationMap } from '../types/LocalizationMap'; 13 | import enUs from './en_US.json'; 14 | 15 | export interface LocalizationContextProps { 16 | l10n: LocalizationMap; 17 | setL10n(l10n: LocalizationMap): void; 18 | } 19 | 20 | export const DefaultLocalization = enUs as unknown as LocalizationMap; 21 | 22 | export const LocalizationContext = React.createContext({ 23 | l10n: DefaultLocalization, 24 | setL10n: () => {}, 25 | }); 26 | -------------------------------------------------------------------------------- /demo/webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | --------------------------------------------------------------------------------