{"id":18486993,"url":"https://github.com/MGrin/mgr-pdf-viewer-react","last_synced_at":"2025-04-08T20:30:32.763Z","repository":{"id":39577667,"uuid":"73934444","full_name":"MGrin/mgr-pdf-viewer-react","owner":"MGrin","description":"React PDF Viewer component","archived":false,"fork":false,"pushed_at":"2023-01-24T22:25:10.000Z","size":4585,"stargazers_count":72,"open_issues_count":29,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-31T17:58:00.043Z","etag":null,"topics":["pdf","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/MGrin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/mr6r1n"]}},"created_at":"2016-11-16T15:42:16.000Z","updated_at":"2024-03-21T17:11:24.000Z","dependencies_parsed_at":"2023-02-14T02:00:33.329Z","dependency_job_id":null,"html_url":"https://github.com/MGrin/mgr-pdf-viewer-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MGrin%2Fmgr-pdf-viewer-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MGrin%2Fmgr-pdf-viewer-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MGrin%2Fmgr-pdf-viewer-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MGrin%2Fmgr-pdf-viewer-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MGrin","download_url":"https://codeload.github.com/MGrin/mgr-pdf-viewer-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223343519,"owners_count":17129952,"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":["pdf","react"],"created_at":"2024-11-06T12:50:02.385Z","updated_at":"2024-11-06T12:50:56.372Z","avatar_url":"https://github.com/MGrin.png","language":"JavaScript","funding_links":["https://www.paypal.me/mr6r1n"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Depreciation notice\nThis project is not maintained anymore. Feel free to:\n* Take ownership of it (please drop me a message for this)\n* Use alternatives (such as [react-pdf](https://github.com/wojtekmaj/react-pdf))\n\n## New section\n# mgr-pdf-viewer-react\nSimple react PDF Viewer component with controls. Every element can be styled upon your preferences using default classes our your own.\n\n## Example: [mgr-pdf-viewer-react](https://mgrin.github.io/mgr-pdf-viewer-react/index.html)\n\n# How to install\n```\nnpm install mgr-pdf-viewer-react --save\n```\n\n# How to use\n\nSince it is a React module, I suppose you have the webpack and babel configured.\n\n```js\nimport React from 'react';\nimport PDFViewer from 'mgr-pdf-viewer-react';\n\nconst ExamplePDFViewer = () =\u003e {\n  return (\u003cPDFViewer document={{\n    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf'\n  }} /\u003e);\n}\n\nexport default ExamplePDFViewer\n```\n\n# Documentation\nReact component prop. types:\n* `document`:\n  * Type:\n\n    ```js\n    PropTypes.shape({\n      file: Any, // File object,\n      url: String, // URL to fetch the pdf\n      connection: Object, // connection parameters to fetch the PDF, see PDF.js docs\n      base64: String, // PDF file encoded in base64\n      binary: UInt8Array\n    })\n    ```\n  * Required: **true**\n  * Description: Provides a way to fetch the PDF document\n\n* `loader`:\n  * Type: *Node*\n  * Required: **false**\n  * Description: A custom loader element that will be shown while the PDF is loading\n\n* `page`:\n  * Type: *Number*\n  * Required: **false**\n  * Description: The page that will be shown first on document load\n\n* `scale`:\n  * Type: *Number*\n  * Required: **false**\n  * Description: Scale factor relative to the component parent element\n\n* `onDocumentClick`:\n  * Type: *Function*\n  * Required: **false**\n  * Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar\n\n* `css`:\n  * Type: *String*\n  * Required: **false**\n  * Description: CSS classes that will be setted for the component wrapper\n\n* `hideNavbar`:\n  * Type: *Boolean*\n  * Required: **false**\n  * Description: By default navbar is displayed, but can be hidden by passing this prop\n\n* `navigation`:\n  * Type:\n\n    ```js\n    PropTypes.oneOfType([\n      // Can be an object with css classes or react elements to be rendered\n      PropTypes.shape({\n        css: PropTypes.shape({\n          previousPageBtn: String, // CSS Class for the previous page button\n          nextPageBtn: String, // CSS Class for the next page button\n          pages: String, // CSS Class for the pages indicator\n          wrapper: String // CSS Class for the navigation wrapper\n        }),\n        elements: PropTypes.shape({\n          previousPageBtn: Any, // previous page button React element\n          nextPageBtn: Any, // next page button React element\n          pages: Any// pages indicator React Element\n        })\n      }),\n      // Or a full navigation component\n      PropTypes.any // Full navigation React element\n    ])\n    ```\n  * Required: **false**\n  * Description: Defines the navigation bar styles and/or elements.\n\n    The `previousPageBtn` and the `nextPageBtn` elements should take following properties: `page` for current page number, `pages` for total number of pages, and the callback function `handlePrevClick` for the `previousPageBtn` and `handleNextClick` for the `nextPageBtn`.\n\n    The `pages` element should take following properties: `page` for current page number, `pages` for total number of pages.\n\n    The `navigation` element (so the full navigation element) should accept following properties: `page` for current page number, `pages` for total number of pages, and the callback functions `handlePrevClick` and `handleNextClick`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMGrin%2Fmgr-pdf-viewer-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMGrin%2Fmgr-pdf-viewer-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMGrin%2Fmgr-pdf-viewer-react/lists"}