├── assets └── img │ ├── react-pdf_cover.webp │ └── react-pdf_logo_light.jpg ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── rp-variables.css └── README.md /assets/img/react-pdf_cover.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-pdf-dev/react-pdf-viewer/HEAD/assets/img/react-pdf_cover.webp -------------------------------------------------------------------------------- /assets/img/react-pdf_logo_light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-pdf-dev/react-pdf-viewer/HEAD/assets/img/react-pdf_logo_light.jpg -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /rp-variables.css: -------------------------------------------------------------------------------- 1 | .rp-theme-variables { 2 | /* Global */ 3 | --rp-font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 4 | --rp-primary-color: #34affc; 5 | --rp-border-radius: 4px; 6 | --rp-text-color: #1c2024; 7 | --rp-outline-color: var(--rp-primary-color); 8 | --rp-font-size: 16px; 9 | /* Drop zone mask */ 10 | --rp-drop-mask-background-color: #fafafa; 11 | /* Loader */ 12 | --rp-loader-backdrop-color: #ffffffcc; 13 | /* Icon */ 14 | --rp-icon-disabled: #c6ccd2; 15 | --rp-icon-font-size: calc(var(--rp-font-size) * 1.25); 16 | /* Toolbar */ 17 | --rp-toolbar-background: #e2e6e9; 18 | --rp-toolbar-border-color: #c6ccd2; 19 | --rp-toolbar-padding: 0.25rem; 20 | --rp-toolbar-gap: 0.25rem; 21 | --rp-toolbar-size: 48px; 22 | /* Sidebar */ 23 | --rp-sidebar-width: 48px; 24 | /* Thumbnail */ 25 | --rp-thumbnail-border-color: #e2e6e9; 26 | --rp-thumbnail-background-color: #ffffff; 27 | --rp-thumbnail-active-color: #00000033; 28 | --rp-thumbnail-padding-y: 16px; 29 | /* Button */ 30 | --rp-button-hover-background: #0000001a; 31 | --rp-button-padding: 4px; 32 | /* Input */ 33 | --rp-input-padding: 0.5rem; 34 | --rp-input-border-radius: calc(var(--rp-border-radius) + 2px); 35 | --rp-input-background-color: #ffffff; 36 | --rp-input-placeholder-color: #c6ccd2; 37 | /* Pages */ 38 | --rp-pages-background-color: #ffffff; 39 | /* Annotations */ 40 | --rp-annotation-layer__link-hover-background: rgba(255, 255, 0, 0.2); 41 | /* Dropdown */ 42 | --rp-dropdown-background-color: #f1f2f4; 43 | --rp-dropdown-padding: 4px; 44 | --rp-dropdown-hover-background-color: #0000001a; 45 | --rp-dropdown-separator-color: #e2e6e9; 46 | --rp-dropdown-separator-margin: 4px; 47 | --rp-dropdown-padding-menu-item: 8px; 48 | --rp-dropdown-font-size: calc(var(--rp-font-size) * 0.875); 49 | --rp-dropdown-border-radius: calc(var(--rp-border-radius) + 2px); 50 | --rp-search-tool-dropdown-padding: 8px; 51 | /* Popover */ 52 | --rp-popover-font-size: calc(var(--rp-font-size) * 0.875); 53 | --rp-popover-background-color: #f1f2f4; 54 | --rp-popover-color: #1c2024; 55 | --rp-popover-border-color: #e2e6e9; 56 | --rp-popover-border-radius: calc(var(--rp-border-radius) + 2px); 57 | /* Dialog */ 58 | --rp-overlay-background-color: #000000cc; 59 | --rp-dialog-background-color: #f1f2f4; 60 | --rp-properties-divider-color: #e2e6e9; 61 | --rp-properties-divider-margin: 16px; 62 | --rp-property-item-gap: 12px; 63 | --rp-dialog-title-color: #1c2024; 64 | --rp-property-item-label-color: #596673; 65 | --rp-property-close-icon-size: calc(var(--rp-font-size) * 1.25); 66 | --rp-property-item-font-size: calc(var(--rp-font-size) * 0.875); 67 | --rp-property-item-font-weight: 400; 68 | --rp-dialog-title-font-size: calc(var(--rp-font-size) * 1.125); 69 | --rp-dialog-title-font-weight: 600; 70 | --rp-menu-item-icon-size: 16px; 71 | /* Print progress */ 72 | --rp-print-progress-background: #f1f2f4ff; 73 | --rp-print-progress-color: #1c2024ff; 74 | /* Drop zone */ 75 | --rp-drop-zone-border: #c6ccd2; 76 | --rp-drop-zone-font-color: #8c99a6; 77 | --rp-drop-zone-font-size: calc(var(--rp-font-size) * 1.125); 78 | --rp-drop-zone-background-color: #fafafa; 79 | /* Checkbox */ 80 | --rp-checkbox-border-radius: var(--rp-border-radius); 81 | --rp-checkbox-border-color: #e2e6e9; 82 | --rp-checkbox-indicator-color: white; 83 | /* Highlight */ 84 | --rp-highlight-background-color: rgba(255, 255, 0, 1); 85 | --rp-text-layer-highlight-border-radius: var(--rp-border-radius); 86 | --rp-current-highlight-background-color: rgba(255, 0, 0, 1); 87 | /* Tooltip */ 88 | --rp-tooltip-background-color: #1c2024; 89 | --rp-tooltip-border-radius: var(--rp-border-radius); 90 | --rp-tooltip-font-color: #ffffff; 91 | --rp-tooltip-font-size: 14px; 92 | --rp-tooltip-padding: 8px 8px; 93 | /* Password Modal */ 94 | --rp-password-background-color: #ffffff; 95 | --rp-password-title-font-color: #1c2024; 96 | --rp-password-content-font-color: #596673; 97 | --rp-password-input-border-color: #e2e6e9; 98 | --rp-password-input-placeholder-color: #c6ccd2; 99 | --rp-password-input-font-color: #000000; 100 | --rp-password-button-background-color: #34affc; 101 | --rp-password-button-font-color: #ffffff; 102 | --rp-password-button-border-color: #0995ee; 103 | /* Container */ 104 | --rp-container-focus-outline-width: 0px; 105 | --rp-container-focus-outline-color: var(--rp-primary-color); 106 | --rp-container-focus-outline-offset: 2px; 107 | } 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | React PDF 6 | 7 | 8 |
9 | 10 |
11 |
12 | Works seamlessly on your React or Next.js websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time. 13 |
14 |
15 | 16 |
17 | 18 | [React PDF Home][reactpdf] - [License](#page_facing_up-license) - [Documentation][reactpdf-docs] 19 | 20 | [![NPM Version](https://img.shields.io/npm/v/%40pdf-viewer%2Freact)][npm] 21 | [![Twitter](https://img.shields.io/twitter/follow/ReactPDF?label=ReactPDF&style=social)][twitter] 22 | 23 |
24 | 25 | # :star: Why React PDF 26 | 27 | - **Save Weeks of Development Time**: React PDF simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time. 28 | - **Tailored for React.js**: React PDF is native to React.js, ensuring smooth integration into your projects. 29 | - **Customizability at Its Core**: Built with flexibility in mind, allowing you to match your application’s unique style and functionality. 30 | - **High-Performance & Rapid Rendering**: Optimized for rendering large PDFs efficiently, React PDF delivers lightning-fast load times with features like virtual scrolling. 31 | - **Accessibility**: Designed with inclusivity in mind, React PDF supports ARIA attributes, catering to diverse user bases. 32 | - **Modern Browser Compatibility**: Works seamlessly across modern browsers, eliminating compatibility headaches. 33 | - **Active Development & Support**: With regular updates and a responsive support team, React PDF evolves to meet developer needs. 34 | 35 | # 📜 Background 36 | 37 | As developers ourselves, we faced many issues such as browser incompatibility and customizability while trying to render a PDF document or working with PDF libraries. Having faced issues using PDF libraries, we want the solution to be flexible for React.js developers and teams. More importantly, the technical document must be easy to use! 38 | 39 | # :sparkles: Features 40 | 41 | - 🎯 **Interactive & Immersive Viewing Experience** with features like rotation, zoom, and keyboard navigation. 42 | - 📱 **Responsive Across All Devices** for a consistent experience on desktops, tablets and mobile devices. 43 | - 🎨 **Customizable UI and Styling** to tailor the viewer’s appearance to match your website’s theme. 44 | - 🧭 **Advanced Navigation Options** to browse documents easily with table of contents, hyperlinks, and a powerful search tool. 45 | - ⚡ **High-Performance Rendering** to load large PDF documents quickly and handle complex elements like vector graphics with ease. 46 | - 🔧 **Programmatic Control with Hooks and Props**, allowing you to interact with the viewer programmatically. 47 | - 📂 **Document Management Tools**, including features like downloading and printing. 48 | - 👁️ **Accessibility Support** to built-in support for ARIA attributes and tooltips, catering to diverse user bases. 49 | 50 | For the full feature set, visit [React PDF Features](https://www.react-pdf.dev/features?utm_source=github&utm_medium=referral). 51 | 52 | # :zap: Quick Start Guide 53 | 54 | Here’s how to get started with React PDF in your React.js project: 55 | 56 | ## 1. Check Prerequsities 57 | 58 | Here are the basic system requirements to run the React PDF component: 59 | 60 | - React version: >= 18.0 61 | - React version: >= 19.0 62 | 63 | If you are working with a React framework such as Next and Gatsby, React PDF can run smoothly as long as you are using React 18 and above. 64 | 65 | React PDF viewer also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI. 66 | 67 | Although React PDF can run on most JavaScript module bundlers, it is more vigorously tested on Vite and Webpack. 68 | 69 | _Remark:
- If using TypeScript, it requires >= TypeScript 4.6._ 70 | 71 | ### Browser support 72 | 73 | | Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android | 74 | | ------ | ------- | ---- | ------ | ---------- | -------------- | 75 | | 115+ | 115+ | 115+ | 16.5+ | 16.5+ | 126+ | 76 | 77 | ## 2. Install the Package 78 | 79 | There are a few ways you can install React PDF, namely `bun`, `npm`, `pnpm` or `yarn`. 80 | 81 | ### Using bun: 82 | 83 | ```bash 84 | bun add @pdf-viewer/react 85 | ``` 86 | 87 | ##### Caching of previous Worker version with `bun` 88 | 89 | To clear cache, try running `bun pm cache rm` to remove cache in the global cache directory. If the error remains, try executing the following steps: 90 | 91 | ```shell 92 | rm bun.lockb 93 | rm -R node_modules 94 | ``` 95 | 96 | ### Using npm: 97 | 98 | ```bash 99 | npm install @pdf-viewer/react 100 | ``` 101 | 102 | ### Using yarn: 103 | 104 | ```bash 105 | yarn add @pdf-viewer/react 106 | ``` 107 | 108 | ### Using pnpm: 109 | 110 | ```bash 111 | pnpm add @pdf-viewer/react 112 | ``` 113 | 114 | For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf.dev/introduction/getting-started/#installation?utm_source=github&utm_medium=referral). 115 | 116 | ## 3. Import and Use the Component 117 | 118 | The following structure demonstrates how to build a React PDF viewer by importing and assembling components. This modular approach gives you the flexibility to customize the viewer as needed. 119 | 120 | ```tsx 121 | {/* Configuration license and pdfjs-dist worker */} 122 | {/* Viewer context provider */} 123 | {/* Theme customization (optional) */} 124 | {/* Default layout container */} 125 | {/* PDF pages renderer */} 126 | 127 | 128 | 129 | 130 | ``` 131 | 132 | _Remark: For more information on each component, please refer to [Component](https://docs.react-pdf.dev/components/overview?utm_source=github&utm_medium=referral)._ 133 | 134 | ### Basic Usage 135 | 136 | The most basic usage of React PDF viewer needs four components, namely: `RPConfig`, `RPProvider`, `RPDefaultLayout`, and `RPPages`. 137 | 138 | Here's how to implement a basic PDF viewer in a React application: 139 | 140 | ```jsx 141 | import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from '@pdf-viewer/react' 142 | 143 | const App = () => { 144 | return ( 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | ) 153 | } 154 | export default App 155 | ``` 156 | 157 | The PDF viewer will automatically adjust to fit its container's dimensions. You can control the size by setting the `style` prop on `RPDefaultLayout`. For more information on using React PDF, visit our [basic usage guide](https://docs.react-pdf.dev/introduction/basic-usage?utm_source=github&utm_medium=referral) 158 | 159 | You may also check out our [Starter Toolkit](#pushpin-starter-toolkit) for examples to get you started. 160 | 161 | ### 4. Customize with Hooks and Props 162 | 163 | To enhance React PDF further, we offer built-in hooks and props that let you fine-tune functionality, adjust appearance, and integrate custom behaviors into your application. 164 | 165 | For detailed usage, refer to our [Documentation][reactpdf-docs]. 166 | 167 | # :pushpin: Starter Toolkit 168 | 169 | Here are some sample projects to get started on React PDF quickly: 170 | 171 | 1. [React (webpack) - JavaScript](https://github.com/react-pdf-dev/starter-rp-react-js-webpack) 172 | 2. [React (webpack) - TypeScript](https://github.com/react-pdf-dev/starter-rp-react-ts-webpack) 173 | 3. [React (vite) - JavaScript](https://github.com/react-pdf-dev/starter-rp-react-js-vite) 174 | 4. [React (vite) - TypeScript](https://github.com/react-pdf-dev/starter-rp-react-ts-vite) 175 | 5. [React (vite) - TypeScript - Turborepo](https://github.com/react-pdf-dev/starter-rp-react-vite-ts-turborepo) 176 | 6. [Next.js - JavaScript (App Router)](https://github.com/react-pdf-dev/starter-rp-nextjs-app-router-js) 177 | 7. [Next.js - TypeScript (App Router)](https://github.com/react-pdf-dev/starter-rp-nextjs-app-router-ts) 178 | 8. [Next.js - TypeScript - Turborepo](https://github.com/react-pdf-dev/starter-rp-next-ts-turborepo) 179 | 9. [Remix - JavaScript](https://github.com/react-pdf-dev/starter-rp-remix-js) 180 | 10. [Remix - TypeScript](https://github.com/react-pdf-dev/starter-rp-remix-ts) 181 | 11. [Gatsby - JavaScript](https://github.com/react-pdf-dev/starter-rp-gatsby-js) 182 | 12. [Gatsby - TypeScript](https://github.com/react-pdf-dev/starter-rp-gatsby-ts) 183 | 13. [Docusaurus - JavaScript](https://github.com/react-pdf-dev/starter-rp-docusaurus-js) 184 | 14. [Docusaurus - TypeScript](https://github.com/react-pdf-dev/starter-rp-docusaurus-ts) 185 | 15. [Electron - JavaScript](https://github.com/react-pdf-dev/starter-rp-electron-js-vite) 186 | 16. [Electron - TypeScript](https://github.com/react-pdf-dev/starter-rp-electron-ts-vite) 187 | 17. [TanStack - JavaScript](https://github.com/react-pdf-dev/starter-rp-tanstack-router-js) 188 | 18. [TanStack - TypeScript](https://github.com/react-pdf-dev/starter-rp-tanstack-router-ts) 189 | 19. [React Router - JavaScript](https://github.com/react-pdf-dev/starter-rp-react-router-js) 190 | 20. [React Router - TypeScript](https://github.com/react-pdf-dev/starter-rp-react-router-ts) 191 | 192 | 193 | # 📝 Changelog 194 | 195 | Check out our latest release [v1.13.0 (25 November 2025)](https://docs.react-pdf.dev/introduction/changelog/#v1130-25-november-2025?utm_source=github&utm_medium=referral) 196 | 197 | 198 | # :raising_hand: Need Help? 199 | 200 | We are more than happy to help you. If you have any questions, run into any errors or face any problems, please feel free to create an issue in [Issues](../../issues) or PM us directly in [Twitter][twitter]. Anything related to React PDF is on the table! 201 | 202 | # :page_facing_up: License 203 | 204 | React PDF is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf.dev/license-agreement?utm_source=github&utm_medium=referral) file for more details. 205 | 206 | If you would like to use React PDF commercially, please purchase a license from [our website][reactpdf] or reach out to us directly at [https://www.react-pdf.dev/contact-us](https://www.react-pdf.dev/contact-us). 207 | 208 | 209 | # Acknowledgement 210 | 211 | - [pdf.js](https://github.com/mozilla/pdf.js) 212 | - [Img Shields](https://shields.io) 213 | - [React.js](https://reactjs.org/) 214 | 215 | [reactpdf]: https://www.react-pdf.dev/?utm_source=github&utm_medium=referral 216 | [reactpdf-docs]: https://docs.react-pdf.dev/?utm_source=github&utm_medium=referral 217 | [npm]: https://www.npmjs.com/package/@pdf-viewer/react 218 | [twitter]: https://www.x.com/ReactPDF 219 | --------------------------------------------------------------------------------