{"id":26242056,"url":"https://github.com/pdf-viewer-react/starter-rp-next-ts","last_synced_at":"2025-03-13T09:42:41.238Z","repository":{"id":279922271,"uuid":"928711475","full_name":"pdf-viewer-react/starter-rp-next-ts","owner":"pdf-viewer-react","description":"React PDF Starter toolkit with Nextjs + TypeScript","archived":false,"fork":false,"pushed_at":"2025-02-28T10:51:43.000Z","size":90,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-28T14:37:03.736Z","etag":null,"topics":["nextjs","pdf-viewer","pdf-viewer-react","pdfjs","pdfjs-dist","react-pdf","react-pdf-viewer","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.react-pdf.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pdf-viewer-react.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-07T05:12:13.000Z","updated_at":"2025-02-28T10:51:47.000Z","dependencies_parsed_at":"2025-02-28T14:37:09.196Z","dependency_job_id":"e8d1c1e8-5aa0-41dc-8a3b-33bd5ed19d76","html_url":"https://github.com/pdf-viewer-react/starter-rp-next-ts","commit_stats":null,"previous_names":["pdf-viewer-react/starter-rp-next-ts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdf-viewer-react%2Fstarter-rp-next-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdf-viewer-react%2Fstarter-rp-next-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdf-viewer-react%2Fstarter-rp-next-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdf-viewer-react%2Fstarter-rp-next-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pdf-viewer-react","download_url":"https://codeload.github.com/pdf-viewer-react/starter-rp-next-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243382789,"owners_count":20282007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","pdf-viewer","pdf-viewer-react","pdfjs","pdfjs-dist","react-pdf","react-pdf-viewer","reactjs","typescript"],"created_at":"2025-03-13T09:42:40.671Z","updated_at":"2025-03-13T09:42:41.231Z","avatar_url":"https://github.com/pdf-viewer-react.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React PDF Starter Toolkit in Next.js and TypeScript\n\nWelcome to the React PDF Starter Toolkit! This repository provides a comprehensive guide on integrating React PDF with Nextjs and TypeScript. It showcases how React PDF can be integrated and rendered as part of a Next.js project.\n\n## Table of Contents\n\n- [Usage](#usage)\n  - [Project Setup](#project-setup)\n  - [Running the Example Project](#running-the-example-project)\n- [Examples](#examples)\n\n## Usage\n\n### Project Setup\n\n1. **Clone the Repository**: If you haven't already, clone the repository and navigate into the project directory.\n\n   ```bash\n   git clone https://github.com/reactpdf/starter-rp-next-ts.git\n   cd starter-rp-next-ts\n   ```\n\n2. **Install Dependencies**: Install the necessary dependencies using npm, yarn, pnpm or bun.\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   # or\n   bun install\n   ```\n\n### Running the Example Project\n\nThis repository includes an example project to demonstrate React PDF in action.\n\n1. **Start the Development Server**: Use the following command to start the development server\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   pnpm run dev\n   # or\n   bun run dev\n   ```\n\n2. **Open in Browser**: Open your browser and navigate to `http://localhost:3000` (or the port specified in your terminal) to see the example project in action\n\n### Using the React PDF Component\n\nOnce the example project is running, you can explore the source code to see how the React PDF component is integrated. Here is a brief overview:\n\n1.  **Import the component**: Import the desired React PDF component into your codes\n\n```tsx\nimport {\n  RPProvider,\n  RPDefaultLayout,\n  RPPages,\n  RPProviderProps,\n  RPLayoutProps,\n} from \"@pdf-viewer/react\";\n\ninterface Props {\n  showToolbar?: boolean;\n  providerProps?: RPProviderProps;\n  defaultLayoutProps?: RPLayoutProps;\n}\n\nconst AppPdfViewer = (props: Props) =\u003e {\n  const { showToolbar = true, providerProps, defaultLayoutProps } = props;\n\n  return (\n    \u003cRPProvider\n      src=\"https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf\"\n      {...providerProps}\n    \u003e\n      {showToolbar ? (\n        \u003cRPDefaultLayout {...defaultLayoutProps}\u003e\n          \u003cRPPages /\u003e\n        \u003c/RPDefaultLayout\u003e\n      ) : (\n        \u003cdiv style={{ width: \"100%\", height: \"550px\" }}\u003e\n          \u003cRPPages /\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/RPProvider\u003e\n  );\n};\n\nexport default PdfViewer;\n```\n\n2. **Import Config Component**: Import the Config component\n\n```tsx\nimport { RPConfig, RPConfigProps } from \"@pdf-viewer/react\";\nimport { FC } from \"react\";\n\nconst AppProviders: FC\u003cRPConfigProps\u003e = ({ children }) =\u003e (\n  \u003cRPConfig licenseKey=\"your-license-key\"\u003e{children}\u003c/RPConfig\u003e\n);\n\nexport default AppProviders;\n```\n\n3. **Disable SSR for AppPdfViewer**: Disable SSR for the AppPdfViewer component by using `dynamic` from `next/dynamic` and set `ssr: false`\n\n```tsx\n\"use client\";\nimport dynamic from \"next/dynamic\";\n\nexport const LazyAppPdfViewer = dynamic(() =\u003e import(\"./AppPdfViewer\"), {\n  ssr: false,\n});\n```\n\n4. **Disable SSR for AppProviders**: Disable SSR for AppProviders by using `dynamic` from `next/dynamic` and set `ssr: false`\n\n```tsx\n\"use client\";\nimport dynamic from \"next/dynamic\";\n\nexport const LazyAppProviders = dynamic(() =\u003e import(\"./AppProviders\"), {\n  ssr: false,\n});\n```\n\n5. **Use the LazyPdfConfig component in layout**: Add the React PDF component to your page\n\n```jsx\nimport \"./globals.css\";\nimport { LazyAppProviders } from \"./components/LazyAppProviders\";\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003c{\n  children: React.ReactNode,\n}\u003e) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody className={\"antialiased\"}\u003e\n        \u003cLazyAppProviders licenseKey=\"your-license-key\"\u003e\n          \u003cmain\u003e{children}\u003c/main\u003e\n        \u003c/LazyAppProviders\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n6. **Use the LazyAppPdfViewer component in page**: Add the React PDF component to your page\n\n```jsx\nimport { LazyAppPdfViewer } from \"./components/LazyAppPdfViewer\";\n\nexport default function Home() {\n  return (\n    \u003cdiv className=\"w-[1028px] h-[700px] mx-auto\"\u003e\n      \u003ch1\u003eRP Starter Toolkit: Nextjs + Javascript\u003c/h1\u003e\n      \u003cbr /\u003e\n      \u003ch2\u003eDefault Toolbar\u003c/h2\u003e\n      \u003cLazyAppPdfViewer /\u003e\n      \u003ch2\u003eWithout Toolbar\u003c/h2\u003e\n      \u003cLazyAppPdfViewer showToolbar={false} /\u003e\n      \u003ch2\u003eMobile\u003c/h2\u003e\n      \u003cLazyAppPdfViewer defaultLayoutProps={{ style: { width: \"500px\" } }} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Examples\n\nFor more examples, please refer to the `src/App.jsx` file in this repository:\n\n- Default Toolbar\n- Without Toolbar\n- Mobile View\n\n_Remark: If you would like more examples, feel free open an issue._\n\nFor more configurations, please check the [documentation](https://docs.react-pdf.dev) site.\n\n---\n\nThank you for using React PDF! We hope this toolkit helps you build amazing Next.js applications. If you have any questions or need further assistance on this example, please feel free to open an issue. Happy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdf-viewer-react%2Fstarter-rp-next-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpdf-viewer-react%2Fstarter-rp-next-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdf-viewer-react%2Fstarter-rp-next-ts/lists"}