{"id":20281810,"url":"https://github.com/rahul2104/reactjs-pdf-reader","last_synced_at":"2025-10-11T19:40:31.960Z","repository":{"id":34851090,"uuid":"184734673","full_name":"rahul2104/reactjs-pdf-reader","owner":"rahul2104","description":"PDF Reader in browser for React js","archived":false,"fork":false,"pushed_at":"2024-05-27T07:11:06.000Z","size":1663,"stargazers_count":25,"open_issues_count":11,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-08T23:28:01.554Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rahul2104.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-05-03T10:03:39.000Z","updated_at":"2025-02-24T16:19:20.000Z","dependencies_parsed_at":"2024-06-18T18:39:25.221Z","dependency_job_id":"4af4c31b-67a1-487d-bda7-5146609596f7","html_url":"https://github.com/rahul2104/reactjs-pdf-reader","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":0.2222222222222222,"last_synced_commit":"d3ecba5b13a532ed1cc11d18fb1b592834f741f5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rahul2104/reactjs-pdf-reader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul2104%2Freactjs-pdf-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul2104%2Freactjs-pdf-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul2104%2Freactjs-pdf-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul2104%2Freactjs-pdf-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rahul2104","download_url":"https://codeload.github.com/rahul2104/reactjs-pdf-reader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul2104%2Freactjs-pdf-reader/sbom","scorecard":{"id":759013,"data":{"date":"2025-08-11","repo":{"name":"github.com/rahul2104/reactjs-pdf-reader","commit":"d3ecba5b13a532ed1cc11d18fb1b592834f741f5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/9 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":"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":"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":"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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"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":"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"}}]},"last_synced_at":"2025-08-22T22:43:07.152Z","repository_id":34851090,"created_at":"2025-08-22T22:43:07.152Z","updated_at":"2025-08-22T22:43:07.152Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008430,"owners_count":26084460,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"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":[],"created_at":"2024-11-14T14:07:02.929Z","updated_at":"2025-10-11T19:40:31.929Z","avatar_url":"https://github.com/rahul2104.png","language":"TypeScript","readme":"# React-pdf-viewer\n\n[![NPM Version][npm-image]][npm-url]\n[![Node Version][node-image]][node-url]\n[![NPM Downloads][downloads-image]][downloads-url]\n[![NPM License][npm-license]][npm-url]\n\n\u003e PDF Reader in browser for React 16.x\n\n\n## Features\n\n* **Simple**: It is very easy to use\n* **Mobile-friendly**: Support all mobile terminal devices including mobile,pad and others\n\n## Browser Support\n\n* IE 10+\n* Firefox 3.6+\n* Chrome 6+\n* Safari 6+\n* Opera 11.5+\n* iOS Safari 6.1+\n* Android Browser 3+\n\n## Quick Start\n\n### 1. Import react-read-pdf  into your react.js project.\n\n(You should import react firt,The version of react must be more than 16.x)\n\nUsing build tools:\n\n```bash\nnpm install --save reactjs-pdf-reader\n```\nUsing PDFReader in PC:\n```js\nimport React from 'react';\nimport { PDFReader } from 'reactjs-pdf-reader';\n```\nUsing MobilePDFReader in mobile terminal devices:\n```js\nimport React from 'react';\nimport { MobilePDFReader } from 'reactjs-pdf-reader';\n\n```\n### 2. Now you have it. The simplest usage:\n\n```js\nimport { MobilePDFReader } from 'react-pdf-viewer';\nexport default class Test extends Component{\n  render(){\n    return \u003cdiv style={{overflow:'scroll',height:600}}\u003e\n            \u003cMobilePDFReader url=\"http://localhost:3000/test.pdf\"/\u003e\n           \u003c/div\u003e\n  }\n}\n```\n\n```js\nimport ReactDOM from 'react-dom';\nimport Test from './test'\nReactDOM.render(\u003cTest /\u003e, document.getElementById('root'));\n```\n\n## Documentation\n\nreact-read-pdf mainly consists of two different components. ***PDFReader and MobilePDFReader***.\n\n### 🌱 PDFReader\n\n```js\nimport { PDFReader } from 'reactjs-pdf-reader'\n\n...\n\u003cPDFReader url={\"http://localhost:3000/test.pdf\"} ...\u003e\n```\n####  Props in PDFReader Component \n\n\u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProps name\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eurl\u003c/th\u003e\n            \u003cth\u003estring | object\u003c/th\u003e\n            \u003cth\u003eif url is a string, it represents absolute address or relative address of PDF files. if url is a object, you can see this \u003ca href=\"#url\"\u003eurl object type \u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003edata\u003c/th\u003e\n            \u003cth\u003estring\u003c/th\u003e\n            \u003cth\u003ebinary-like data of PDF.For example,in javascript, you can use the method \"atob\" to convert base64 encoded PDF to binary-like data. \u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003epage\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefault value is 1 ,decides that which page to show in PDF file.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003escale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edecides the viewport in render\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003ewidth\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edecides the width of viewport\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eshowAllPage\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefault value is false , if it is true , it will render all pages of the pdf file. if it is false ,it will only show the \"currentPage\" according to the page props's value.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eonDocumentComplete\u003c/th\u003e\n            \u003cth\u003efunction\u003c/th\u003e\n            \u003cth\u003eafter load the PDF file, in this function ,you can get some informations of the PDF file you can see this \u003ca href=\"#function1\"\u003efunction type\u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003egetPageNumber\u003c/th\u003e\n            \u003cth\u003efunction\u003c/th\u003e\n            \u003cth\u003eafter load the PDF file, in this function onclick event you can get current page number of the PDF file\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n    \n    \n    \n\u003ca name=\"url\"\u003e\u003cb\u003eurl\u003c/b\u003e\u003c/a\u003e \nthe url property of ***PDFReader***\n\nType: \n\n - string : it represents absolute address or relative address of PDF files\n - object :\n \nProperties:\n Property Name| type |Description\n--- | --- | ---\nurl | string | it represents absolute address or relative address of PDF files\nwithCredentials | boolean | is allow requests to carry cookie or not\n\n\u003ca name=\"function1\"\u003e\u003cb\u003eonDocumentComplete\u003c/b\u003e\u003c/a\u003e \nthe onDocumentComplete property of ***PDFReader***\n\nType:\n\n - function(totalPage)\n\nonDocumentComplete's type is a function, the fisrt default parameter is  totalPage of the PDF file\n \n#### Notes\n\nThe url of props can be string or object.\n\nThe following two ways are the same.\n\nOne is :\n\n```js\n \u003cMobilePDFReader url=\"http://localhost:3000/test.pdf\"/\u003e\n\n```\nthe other is :\n```js\n \u003cMobilePDFReader url={url:\"http://localhost:3000/test.pdf\"}/\u003e\n\n```\n### 🌱 MobilePDFReader\n\n```js\nimport { MobilePDFReader } from 'reactjs-pdf-reader'\n\n...\n\u003cMobilePDFReader url={\"http://localhost:3000/test.pdf\"} ...\u003e\n```\n\n####  Props in MobilePDFReader Component \n\u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProps name\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eurl\u003c/th\u003e\n            \u003cth\u003estring | object\u003c/th\u003e\n            \u003cth\u003eit represents absolute address or relative address of PDF files.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003epage\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefault value is 1 ,decides that which page to show in PDF file.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003escale\u003c/th\u003e\n            \u003cth\u003e'auto' | number\u003c/th\u003e\n            \u003cth\u003edefaut value is 'auto', react-react-pdf use pdfjs-viewer,so if the scale is 'auto' , it can Adaptive mobile device .This property decides the viewport in render\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eminScale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefaut value is 0.25,  decides the minimum value of scale\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003emaxScale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefaut value is 10,  decides the max value of scale\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eisShowHeader\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefaut value is true, in order to show lively example.'react-react-pdf' added default style to  special header, you can remove this style ,if you change this value to false\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eisShowFooter\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefaut value is true, in order to show lively example.'react-react-pdf' added default style to  special footer, you can remove this style ,if you change this value to false\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eonDocumentComplete\u003c/th\u003e\n            \u003cth\u003efunction\u003c/th\u003e\n            \u003cth\u003eafter load the PDF file, in this function ,you can get some informations of the PDF file you can see this \u003ca href=\"#function2\"\u003efunction type\u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n\n\u003ca name=\"function2\"\u003e\u003cb\u003eonDocumentComplete\u003c/b\u003e\u003c/a\u003e \nthe onDocumentComplete property of ***MobilePDFReader***\n\nType: \n\n - function(totalPage,title,otherObj)\n\nProperties:\n Property Name| type |Description\n--- | --- | ---\ntotalPage | number | the totalPage of the PDF file\ntitle | title | the title of the PDF file\notherObj | object | other coding information of the PDF file\n\n#### Notes\n\nI strongly recommend you to set initial value of scale is 'auto',the default is 'auto' too\n\n\n[npm-image]: https://img.shields.io/npm/v/reactjs-pdf-reader\n[npm-url]: https://www.npmjs.com/package/reactjs-pdf-reader\n[node-image]: https://img.shields.io/node/v/reactjs-pdf-reader\n[node-url]: https://www.npmjs.com/package/reactjs-pdf-reader\n[downloads-image]: https://img.shields.io/npm/dm/reactjs-pdf-reader.svg\n[downloads-url]: https://www.npmjs.com/package/reactjs-pdf-reader\n[npm-license]:https://img.shields.io/npm/l/reactjs-pdf-reader\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahul2104%2Freactjs-pdf-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frahul2104%2Freactjs-pdf-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahul2104%2Freactjs-pdf-reader/lists"}