{"id":48929799,"url":"https://github.com/react-pdf-kit/starter-rp-docusaurus-ts","last_synced_at":"2026-04-17T08:31:23.840Z","repository":{"id":317516078,"uuid":"1057157888","full_name":"react-pdf-kit/starter-rp-docusaurus-ts","owner":"react-pdf-kit","description":"React PDF Kit Starter Toolkit with Docusaurus and TypeScript","archived":false,"fork":false,"pushed_at":"2026-03-13T03:56:51.000Z","size":396,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-13T10:58:36.321Z","etag":null,"topics":["docusaurus","pdf-viewer","pdf-viewer-react","pdfjs","pdfjs-dist","react","react-pdf","react-pdf-kit","react-pdf-viewer","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.react-pdf-kit.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/react-pdf-kit.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-15T10:56:22.000Z","updated_at":"2026-03-13T03:56:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"7118ef9c-78ed-4157-9a1a-94a98400ba84","html_url":"https://github.com/react-pdf-kit/starter-rp-docusaurus-ts","commit_stats":null,"previous_names":["pdf-viewer-react/starter-rp-docusaurus-ts","react-pdf-dev/starter-rp-docusaurus-ts","react-pdf-kit/starter-rp-docusaurus-ts"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/react-pdf-kit/starter-rp-docusaurus-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-pdf-kit%2Fstarter-rp-docusaurus-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-pdf-kit%2Fstarter-rp-docusaurus-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-pdf-kit%2Fstarter-rp-docusaurus-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-pdf-kit%2Fstarter-rp-docusaurus-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-pdf-kit","download_url":"https://codeload.github.com/react-pdf-kit/starter-rp-docusaurus-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-pdf-kit%2Fstarter-rp-docusaurus-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31921770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["docusaurus","pdf-viewer","pdf-viewer-react","pdfjs","pdfjs-dist","react","react-pdf","react-pdf-kit","react-pdf-viewer","reactjs","typescript"],"created_at":"2026-04-17T08:31:23.304Z","updated_at":"2026-04-17T08:31:23.834Z","avatar_url":"https://github.com/react-pdf-kit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React PDF Kit Starter Toolkit in Docusaurus and TypeScript\n\n[![Open example in codesandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/react-pdf-kit/starter-rp-docusaurus-ts/main)\n\nWelcome to the React PDF Kit Starter Toolkit! This repository provides a comprehensive guide on integrating React PDF with Docusaurus and TypeScript. It showcases how the React PDF Viewer component can be integrated and rendered as part of a React.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/react-pdf-kit/starter-rp-docusaurus-ts.git\n   cd starter-rp-docusaurus-ts.git\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 Kit in action.\n\n1. **Start the Development Server**: Use the following command to start the development server\n\n```bash\n   npm run start\n   # or\n   yarn start\n   # or\n   pnpm run start\n   # or\n   bun run start\n   ```\n   \nBy default, the dev server runs on `http://localhost:3000`.\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  RPLayout,\n  RPLayoutProps,\n  RPPages,\n  RPProvider,\n  RPProviderProps,\n} from \"@react-pdf-kit/viewer\";\nimport React, { type FC } from \"react\";\n\ninterface IProps {\n  showToolbar: boolean;\n  providerProps: Omit\u003cRPProviderProps, \"src\"\u003e;\n  defaultLayoutProps: RPLayoutProps;\n}\n\nconst DEFAULT_PDF_URL =\n  \"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\";\n\nconst AppPdfViewer: FC\u003cPartial\u003cIProps\u003e\u003e = (props) =\u003e {\n  const { showToolbar = true, providerProps, defaultLayoutProps } = props;\n  return (\n    \u003cdiv\u003e\n      \u003cRPProvider src={DEFAULT_PDF_URL} {...providerProps}\u003e\n        {showToolbar ? (\n          \u003cRPLayout toolbar {...defaultLayoutProps}\u003e\n            \u003cRPPages /\u003e\n          \u003c/RPLayout\u003e\n        ) : (\n          \u003cdiv style={{ width: \"100%\", height: \"550px\" }}\u003e\n            \u003cRPPages /\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/RPProvider\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default AppPdfViewer;\n```\n\n2. **Use the component in the page**: Add the React PDF component to your page\n\n```tsx\nimport type { ReactNode } from \"react\";\nimport useDocusaurusContext from \"@docusaurus/useDocusaurusContext\";\nimport { RPConfig } from \"@react-pdf-kit/viewer\";\nimport AppPdfViewer from \"../components/AppPdfViewer\";\n\nexport default function Home(): ReactNode {\n  const { siteConfig } = useDocusaurusContext();\n  return (\n    \u003cRPConfig\u003e\n      \u003cdiv className=\"container\"\u003e\n        \u003ch1\u003e{siteConfig.title}\u003c/h1\u003e\n        \u003cbr /\u003e\n        \u003ch2\u003eDefault Toolbar\u003c/h2\u003e\n        \u003cAppPdfViewer /\u003e\n        \u003cbr /\u003e\n        \u003ch2\u003eWithout Toolbar\u003c/h2\u003e\n        \u003cAppPdfViewer\n          showToolbar={false}\n          defaultLayoutProps={{\n            style: { width: \"100%\", height: \"550px\" },\n          }}\n        /\u003e\n        \u003cbr /\u003e\n        \u003ch2\u003eMobile\u003c/h2\u003e\n        \u003cAppPdfViewer\n          defaultLayoutProps={{\n            style: { width: \"500px\" },\n          }}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/RPConfig\u003e\n  );\n}\n```\n\n## Examples\n\nFor more examples, please refer to the `src/pages/index.tsx` 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-kit.dev/) site.\n\n## Meta\n\n- Homepage: [https://www.react-pdf-kit.dev](https://www.react-pdf-kit.dev)\n- Docs: [https://docs.react-pdf-kit.dev](https://docs.react-pdf-kit.dev)\n\n---\n\nThank you for using React PDF Kit! We hope this toolkit helps you build amazing React.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%2Freact-pdf-kit%2Fstarter-rp-docusaurus-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-pdf-kit%2Fstarter-rp-docusaurus-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-pdf-kit%2Fstarter-rp-docusaurus-ts/lists"}