{"id":49453721,"url":"https://github.com/gkaemmer/react-pdf-pages","last_synced_at":"2026-06-18T22:01:01.159Z","repository":{"id":57342356,"uuid":"76147425","full_name":"gkaemmer/react-pdf-pages","owner":"gkaemmer","description":"Render many pages of a PDF with React","archived":false,"fork":false,"pushed_at":"2017-08-06T05:30:28.000Z","size":184,"stargazers_count":24,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-23T22:53:51.091Z","etag":null,"topics":["pdf","react","react-pdf"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gkaemmer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-11T01:25:07.000Z","updated_at":"2022-07-01T18:58:25.000Z","dependencies_parsed_at":"2022-09-16T03:01:38.071Z","dependency_job_id":null,"html_url":"https://github.com/gkaemmer/react-pdf-pages","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gkaemmer/react-pdf-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkaemmer%2Freact-pdf-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkaemmer%2Freact-pdf-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkaemmer%2Freact-pdf-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkaemmer%2Freact-pdf-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gkaemmer","download_url":"https://codeload.github.com/gkaemmer/react-pdf-pages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkaemmer%2Freact-pdf-pages/sbom","scorecard":{"id":428848,"data":{"date":"2025-08-11","repo":{"name":"github.com/gkaemmer/react-pdf-pages","commit":"6b084cf2829008250769c5927d70587e721bed49"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 2/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T02:51:22.485Z","repository_id":57342356,"created_at":"2025-08-19T02:51:22.485Z","updated_at":"2025-08-19T02:51:22.485Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34508867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"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":["pdf","react","react-pdf"],"created_at":"2026-04-30T04:01:03.703Z","updated_at":"2026-06-18T22:01:01.153Z","avatar_url":"https://github.com/gkaemmer.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# react-pdf-pages [![npm](https://img.shields.io/npm/v/react-pdf-pages.svg)](https://www.npmjs.com/package/react-pdf-pages) [![npm](https://img.shields.io/npm/dm/react-pdf-pages.svg)](https://www.npmjs.com/package/react-pdf-pages)\nSimple, adaptable component to render PDF files in React.\n\n## Installation\n\n`npm install react-pdf-pages`\n\n## Usage\n\n`react-pdf-pages` exports two components `PDF` and `Page`, which you can import like this:\n\n```js\nimport PDF, { Page } from 'react-pdf-pages';\n```\n\nThe `PDF` components handles the loading of the file, which you pass to it as a URL:\n\n```js\n\u003cPDF url=\"/path/to/file.pdf\" ...\u003e\n```\n\nThe `PDF` component renders nothing on its own, but is intended to wrap `Page`s so that you can style them yourself. Minimal example:\n\n```js\nclass PDFViewer extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      pages: null\n    }\n  }\n\n  render() {\n    return (\n      \u003cPDF url={this.state.url}\n           onComplete={(pages) =\u003e this.setState({ pages })}\u003e\n        {this.state.pages \u0026\u0026\n          \u003cdiv\u003e\n            {this.state.pages.map((page) =\u003e\n              \u003cPage key={page.key} page={page} /\u003e\n            )}\n          \u003c/div\u003e\n        }\n      \u003c/PDF\u003e\n    );\n  }\n}\n```\n\n## API\n\n#### `PDF`\nThe PDF wrapper component. Renders only its children. Props:\n\n* `url: string`: The url to load. *Warning: PDFJS uses XMLHttpRequests under the hood, so loading a URL from a different domain requires CORS permissions.*\n* `onComplete: function(pages, file)`: Called when the file is done loading and is ready to render. To render pages, keep track of the value of `pages` and pass them to `Page`s components. *Note: unless you're doing low-level operations on the PDFJS `file` object, you can safely ignore the second argument.*\n* `onProgress: function(loadedObj)`: Called as the PDF loads. Use `loadedObj.loaded` and `loadedObj.total` to show loading progress. See the full-featured example for usage.\n* `onError: function(error)`: Called when the PDF fails to load. `error.message` contains the message from PDF.js.\n* `headers: object`: An object whose key/value pairs will be included as headers in the HTTP request to `url`.\n\n\n#### `Page`\nRenders a page of a PDF. Always grows to fill the width of its parent, and its height depends on the height of the rendered PDF page. The Props:\n\n* `page`: A page from `pages` passed to `onComplete`.\n* `onSizeReady: function(width, height)`: Called when the PDF page's size has been determined.\n\nBoth `PDF` and `Page` will pass the `style` and `className` props to their immediate inner elements.\n\n### A word of warning\n`react-pdf-pages` is intended as a low-level way to control when and where PDF pages are rendered. Rendering many pages at a time can cause browsers to hang and crash. If you want to display an entire PDF, it's recommended that you use some sort of virtualization library such as `react-virtualized` to limit the number of pages that get mounted at any one time.\n\n## Importing PDF.js\nTo use `react-pdf-pages`, you must include PDF.js in the page as the global `PDFJS`. To do this, it's recommended that you include `pdfjs-dist` in your bundle, like so:\n\n```js\n// client.js\nimport 'pdfjs-dist';\n\n// Note: this uses file-loader, in order to prevent pdf.worker.min.js from\n// being loaded into the entry bundle. It should be loaded by the browser\n// on its own.\nPDFJS.workerSrc = require('file-loader!pdfjs-dist/build/pdf.worker.min.js');\n\n// ...\n```\n\n## Complete Example\n\n```js\nimport 'pdfjs-dist';\nimport PDF, { Page } from 'react-pdf-pages';\nPDFJS.workerSrc = require('file-loader!pdfjs-dist/build/pdf.worker.min.js');\n\nclass PDFViewer extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      url: '/example.pdf',\n      pages: null,\n      loaded: 0,\n      total: 0,\n      error: null\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        {/* Allow editing of the URL (totally optional) */}\n        \u003cform onSubmit={(e) =\u003e { e.preventDefault(); this.setState({ url: this.refs.url.value })}}\u003e\n          \u003cinput type=\"text\" ref=\"url\" defaultValue={this.state.url} /\u003e\n          \u003cinput type=\"submit\" value=\"Update URL\" /\u003e\n        \u003c/form\u003e\n\n        \u003cPDF url={this.state.url}\n             onProgress={({ loaded, total }) =\u003e this.setState({ loaded, total })}\n             onComplete={(pages) =\u003e this.setState({ error: null, pages })}\n             onError={(error) =\u003e this.setState({ error })}\u003e\n          {this.state.error\n            ? \u003cspan\u003e\n                {this.state.error.message}\n              \u003c/span\u003e\n            : this.state.pages\n              ? \u003cdiv\u003e\n                  {this.state.pages.map((page) =\u003e\n                    \u003cPage key={page.key} page={page} /\u003e\n                  )}\n                \u003c/div\u003e\n              : \u003cspan\u003eLoading {Math.round(this.state.loaded * 100/this.state.total)}\u003c/span\u003e\n          }\n        \u003c/PDF\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkaemmer%2Freact-pdf-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgkaemmer%2Freact-pdf-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkaemmer%2Freact-pdf-pages/lists"}