|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Getting started with Syncfusion React PDF Viewer with React Router |
| 4 | +description: Short quickstart for integrating the Syncfusion React PDF Viewer into a React application using React Router v7 (standalone/client-only rendering). |
| 5 | +control: PDF Viewer |
| 6 | +platform: document-processing |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# React Router v7 Quickstart |
| 12 | + |
| 13 | +N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer. |
| 14 | + |
| 15 | +## Prerequisites |
| 16 | + |
| 17 | +- Node.js (recommended >= 18) |
| 18 | +- A React Router app (see steps below) or an existing React Router project |
| 19 | +- React 18+ |
| 20 | +- See the [System requirements](../../../../System-Requirements) for platform details. |
| 21 | + |
| 22 | +## Project layout (which starter you used) |
| 23 | + |
| 24 | +Different starters create different folder layouts. Pick the mapping that matches your project and follow the file locations shown below. |
| 25 | + |
| 26 | +- create-react-router (framework-mode — `app/` tree) |
| 27 | + - Global CSS: `app/app.css` (imported by `root.ts`) |
| 28 | + - Component: `app/components/PdfViewerClient.ts` |
| 29 | + - Route: `app/routes/home.ts` or `app/routes/index.ts` |
| 30 | + |
| 31 | +- Vite / plain React (traditional — `src/` tree) |
| 32 | + - Global CSS: `src/index.css` (imported from `src/main.ts`) |
| 33 | + - Component: `src/components/PdfViewerClient.ts` |
| 34 | + - Route wrapper: `src/App.ts` + `BrowserRouter` in `src/main.ts` |
| 35 | + |
| 36 | +Use the file paths that match your project layout when following the steps below. |
| 37 | + |
| 38 | +## Step 1 — Create a React + React Router (v7) app |
| 39 | + |
| 40 | +If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool: |
| 41 | + |
| 42 | +```bash |
| 43 | +npx create-react-router@latest remix-pdf-viewer |
| 44 | +# follow prompts (pick your preferred package manager and options) |
| 45 | +cd remix-pdf-viewer |
| 46 | +npm install |
| 47 | +npm run dev |
| 48 | +``` |
| 49 | + |
| 50 | +If you prefer a Vite-based React project (creates a `src/` tree), create it with Vite and add React Router v7: |
| 51 | + |
| 52 | +```bash |
| 53 | +npm create vite@latest my-app -- --template react |
| 54 | +cd my-app |
| 55 | +npm install |
| 56 | +npm install react-router@7 react-router-dom@7 |
| 57 | +npm run dev |
| 58 | +``` |
| 59 | + |
| 60 | +## Step 2 — Install the PDF Viewer package |
| 61 | + |
| 62 | +```bash |
| 63 | +npm install @syncfusion/ej2-react-pdfviewer --save |
| 64 | +``` |
| 65 | + |
| 66 | +## Step 3 — Copy viewer runtime assets to `public` |
| 67 | + |
| 68 | +The PDF Viewer requires runtime assets (pdfium.js, pdfium.wasm, supporting files). Copy them from the `ej2-pdfviewer` package to your `public` folder so `resourceUrl` can point to `/ej2-pdfviewer-lib`. |
| 69 | + |
| 70 | +Unix/macOS (or Git Bash / WSL): |
| 71 | + |
| 72 | +```bash |
| 73 | +cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/ej2-pdfviewer-lib |
| 74 | +``` |
| 75 | + |
| 76 | +Windows PowerShell: |
| 77 | + |
| 78 | +```powershell |
| 79 | +Copy-Item -Path .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\public\ej2-pdfviewer-lib -Recurse |
| 80 | +``` |
| 81 | + |
| 82 | +Confirm `public/ej2-pdfviewer-lib` contains `pdfium.js` and `pdfium.wasm`. |
| 83 | + |
| 84 | +## Step 4 — Add global CSS for the viewer |
| 85 | + |
| 86 | +Place the Syncfusion CSS imports in your project's global stylesheet. Choose the path that matches your project layout. |
| 87 | + |
| 88 | +create-react-router (`app/` tree) |
| 89 | + |
| 90 | + - File: `app/app.css` (or similar global CSS imported by `root.ts`) |
| 91 | + |
| 92 | +Vite / plain React (`src/` tree) |
| 93 | + |
| 94 | + - File: `src/index.css` (imported from `src/main.ts`) |
| 95 | + |
| 96 | +Example CSS (same for both): |
| 97 | + |
| 98 | +```css |
| 99 | +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; |
| 100 | +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; |
| 101 | +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; |
| 102 | +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; |
| 103 | +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; |
| 104 | +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; |
| 105 | +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; |
| 106 | +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; |
| 107 | +``` |
| 108 | + |
| 109 | +Then import the stylesheet according to your starter: |
| 110 | + |
| 111 | +create-react-router (`app/root.ts` or `app/root.ts`): ensure the global CSS is imported or linked from `root` following the starter conventions. |
| 112 | + |
| 113 | +Vite / plain React (`src/main.ts`): |
| 114 | + |
| 115 | +```js |
| 116 | +import React from 'react'; |
| 117 | +import ReactDOM from 'react-dom/client'; |
| 118 | +import { BrowserRouter } from 'react-router-dom'; |
| 119 | +import App from './App'; |
| 120 | +import './index.css'; |
| 121 | + |
| 122 | +ReactDOM.createRoot(document.getElementById('root')).render( |
| 123 | + <BrowserRouter> |
| 124 | + <App /> |
| 125 | + </BrowserRouter> |
| 126 | +); |
| 127 | +``` |
| 128 | + |
| 129 | +## Step 5 — Client-only rendering |
| 130 | + |
| 131 | +The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it. Render it only after the component mounts. Create a client-only component in the folder that matches your project layout. |
| 132 | + |
| 133 | +create-react-router (`app/` tree) |
| 134 | + |
| 135 | + - `app/components/PdfViewerClient.ts` |
| 136 | + |
| 137 | +Vite / plain React (`src/` tree) |
| 138 | + |
| 139 | + - `src/components/PdfViewerClient.ts` |
| 140 | + |
| 141 | +Example component (works in either location): |
| 142 | + |
| 143 | +```ts |
| 144 | +// components/PdfViewerClient.ts |
| 145 | +import React, { useEffect, useState } from 'react'; |
| 146 | +import { |
| 147 | + PdfViewerComponent, |
| 148 | + Toolbar, |
| 149 | + Magnification, |
| 150 | + Navigation, |
| 151 | + Annotation, |
| 152 | + Inject, |
| 153 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 154 | + |
| 155 | +export default function PdfViewerClient() { |
| 156 | + const [mounted, setMounted] = useState(false); |
| 157 | + useEffect(() => setMounted(true), []); |
| 158 | + |
| 159 | + if (!mounted) return null; |
| 160 | + |
| 161 | + return ( |
| 162 | + <div className="control-section"> |
| 163 | + <PdfViewerComponent |
| 164 | + id="container" |
| 165 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 166 | + resourceUrl={`${window.location.origin}/ej2-pdfviewer-lib`} |
| 167 | + style={{ height: '640px' }} |
| 168 | + > |
| 169 | + <Inject services={[Toolbar, Magnification, Navigation, Annotation]} /> |
| 170 | + </PdfViewerComponent> |
| 171 | + </div> |
| 172 | + ); |
| 173 | +} |
| 174 | +``` |
| 175 | + |
| 176 | +Routing / usage examples: |
| 177 | + |
| 178 | +create-react-router (`app/routes/home.ts` or `app/routes/index.ts`): |
| 179 | + |
| 180 | +```ts |
| 181 | +import PdfViewerClient from '../components/PdfViewerClient'; |
| 182 | +
|
| 183 | +export default function Home() { |
| 184 | + return <PdfViewerClient />; |
| 185 | +} |
| 186 | +``` |
| 187 | + |
| 188 | +Vite / plain React (`src/App.ts`): |
| 189 | + |
| 190 | +```ts |
| 191 | +import { Routes, Route } from 'react-router-dom'; |
| 192 | +import PdfViewerClient from './components/PdfViewerClient'; |
| 193 | +
|
| 194 | +export default function App() { |
| 195 | + return ( |
| 196 | + <Routes> |
| 197 | + <Route path="/" element={<PdfViewerClient />} /> |
| 198 | + </Routes> |
| 199 | + ); |
| 200 | +} |
| 201 | +``` |
| 202 | + |
| 203 | +## Step 6 — Run the app |
| 204 | + |
| 205 | +```bash |
| 206 | +npm run dev |
| 207 | +# open the URL printed by the dev server (usually http://localhost:3000) |
| 208 | +``` |
| 209 | + |
| 210 | +## See also |
| 211 | + |
| 212 | +- [Getting started overview](../getting-started-overview) |
| 213 | +- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started) |
0 commit comments