|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Getting started with React PDF Viewer in Gatsby | Syncfusion |
| 4 | +description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation). |
| 5 | +control: PDF Viewer |
| 6 | +platform: document-processing |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Getting started with the React PDF Viewer in Gatsby |
| 12 | + |
| 13 | +How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes). |
| 14 | + |
| 15 | +## Tutorial — Quickstart for Gatsby |
| 16 | + |
| 17 | +1. Create or open your Gatsby site. |
| 18 | + |
| 19 | +```bash |
| 20 | +# create a new Gatsby site (or use an existing one) |
| 21 | +gatsby new my-gatsby-site |
| 22 | +cd my-gatsby-site |
| 23 | +npm install |
| 24 | +``` |
| 25 | + |
| 26 | +2. Install the PDF Viewer package: |
| 27 | + |
| 28 | +```bash |
| 29 | +npm install @syncfusion/ej2-react-pdfviewer --save |
| 30 | +``` |
| 31 | + |
| 32 | +3. Optional — host runtime locally or use the CDN |
| 33 | + |
| 34 | +If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production. |
| 35 | + |
| 36 | +Optional local copy (Unix/macOS / Git Bash / WSL): |
| 37 | + |
| 38 | +```bash |
| 39 | +cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib |
| 40 | +# copy a sample PDF to static/assets (create folder if needed) |
| 41 | +mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf |
| 42 | +``` |
| 43 | + |
| 44 | +4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling): |
| 45 | + |
| 46 | +Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`): |
| 47 | + |
| 48 | +```css |
| 49 | +@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; |
| 50 | +@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; |
| 51 | +@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; |
| 52 | +@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; |
| 53 | +@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; |
| 54 | +@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; |
| 55 | +@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; |
| 56 | +@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; |
| 57 | +``` |
| 58 | + |
| 59 | +Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle: |
| 60 | + |
| 61 | +```js |
| 62 | +// gatsby-browser.js |
| 63 | +import './src/components/layout.css'; |
| 64 | +``` |
| 65 | + |
| 66 | +5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one): |
| 67 | + |
| 68 | +```js |
| 69 | +// src/components/pdfviewer.js |
| 70 | +import React, { useEffect, useState } from 'react'; |
| 71 | +import { |
| 72 | + PdfViewerComponent, |
| 73 | + Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, |
| 74 | + BookmarkView, ThumbnailView, Print, TextSelection, TextSearch |
| 75 | + , FormFields, FormDesigner, Inject |
| 76 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 77 | + |
| 78 | +export default function PdfViewer() { |
| 79 | + const [isClient, setIsClient] = useState(false); |
| 80 | + |
| 81 | + useEffect(() => setIsClient(true), []); |
| 82 | + |
| 83 | + if (!isClient) return null; // prevent SSR crash (window not defined) |
| 84 | + |
| 85 | + return ( |
| 86 | + <div style={{ height: "100vh" }}> |
| 87 | + <PdfViewerComponent |
| 88 | + id="pdfViewer" |
| 89 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 90 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 91 | + style={{ height: "100%", width: "100%" }} |
| 92 | + > |
| 93 | + <Inject services={[ |
| 94 | + Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, |
| 95 | + BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, |
| 96 | + Magnification, FormFields, FormDesigner |
| 97 | + ]} /> |
| 98 | + </PdfViewerComponent> |
| 99 | + </div> |
| 100 | + ); |
| 101 | +} |
| 102 | +``` |
| 103 | + |
| 104 | +Add a page that uses the component at `src/pages/index.js`: |
| 105 | + |
| 106 | +```js |
| 107 | +// src/pages/index.js |
| 108 | +import React from "react"; |
| 109 | +import PdfViewer from "../components/pdfviewer"; |
| 110 | +export default function PdfViewerPage() { |
| 111 | + return ( |
| 112 | + <main> |
| 113 | + <h1 style={{ padding: "10px 20px", background: "#f5f5f5" }}> |
| 114 | + Syncfusion PDF Viewer in Gatsby |
| 115 | + </h1> |
| 116 | + <PdfViewer /> |
| 117 | + </main> |
| 118 | + ); |
| 119 | +} |
| 120 | +``` |
| 121 | + |
| 122 | +6. Run the Gatsby dev server: |
| 123 | + |
| 124 | +```bash |
| 125 | +npm run develop |
| 126 | +``` |
| 127 | + |
| 128 | +## See also |
| 129 | + |
| 130 | +- [Getting started overview](../getting-started-overview) |
| 131 | +- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started) |
| 132 | +- [Getting started with Syncfusion React PDF Viewer in Remix](./remix) |
0 commit comments