{"id":18486991,"url":"https://github.com/ansu5555/pdf-viewer-reactjs","last_synced_at":"2025-04-08T20:30:30.204Z","repository":{"id":38550519,"uuid":"194058457","full_name":"ansu5555/pdf-viewer-reactjs","owner":"ansu5555","description":"A simple PDF viewer for React js","archived":false,"fork":false,"pushed_at":"2024-05-07T23:39:25.000Z","size":22674,"stargazers_count":145,"open_issues_count":50,"forks_count":66,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T09:03:44.941Z","etag":null,"topics":["document","pages","pdf","pdf-viewer","react","react-pdf","react-pdf-viewer","reactjs","rotate","rotate-pdf","zoom","zoom-pdf"],"latest_commit_sha":null,"homepage":"https://ansu5555.github.io/pdf-viewer-reactjs/","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/ansu5555.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-06-27T08:49:39.000Z","updated_at":"2025-02-27T02:25:00.000Z","dependencies_parsed_at":"2024-06-18T14:06:44.810Z","dependency_job_id":null,"html_url":"https://github.com/ansu5555/pdf-viewer-reactjs","commit_stats":{"total_commits":155,"total_committers":12,"mean_commits":"12.916666666666666","dds":"0.49677419354838714","last_synced_commit":"3907cc4de70b9c20acf5f2eac40fc4bdbf20f9ba"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansu5555%2Fpdf-viewer-reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansu5555%2Fpdf-viewer-reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansu5555%2Fpdf-viewer-reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansu5555%2Fpdf-viewer-reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ansu5555","download_url":"https://codeload.github.com/ansu5555/pdf-viewer-reactjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247922563,"owners_count":21018820,"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":["document","pages","pdf","pdf-viewer","react","react-pdf","react-pdf-viewer","reactjs","rotate","rotate-pdf","zoom","zoom-pdf"],"created_at":"2024-11-06T12:50:02.352Z","updated_at":"2025-04-08T20:30:29.527Z","avatar_url":"https://github.com/ansu5555.png","language":"JavaScript","readme":"# pdf-viewer-reactjs\n\n![GitHub Repo stars](https://img.shields.io/github/stars/ansu5555/pdf-viewer-reactjs?style=social)\n\n![npm](https://img.shields.io/npm/v/pdf-viewer-reactjs) ![npm](https://img.shields.io/npm/dw/pdf-viewer-reactjs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/pdf-viewer-reactjs) ![NPM](https://img.shields.io/npm/l/pdf-viewer-reactjs)\n\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/171e095d2873453b8f2f8cea3b5f7be9)](https://www.codacy.com/gh/ansu5555/pdf-viewer-reactjs/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=ansu5555/pdf-viewer-reactjs\u0026utm_campaign=Badge_Grade) [![Total alerts](https://img.shields.io/lgtm/alerts/g/ansu5555/pdf-viewer-reactjs.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/ansu5555/pdf-viewer-reactjs/alerts/) [![codecov](https://codecov.io/gh/ansu5555/pdf-viewer-reactjs/branch/master/graph/badge.svg?token=ESMHLXF9WR)](https://codecov.io/gh/ansu5555/pdf-viewer-reactjs) ![GiHub CI workflow](https://github.com/ansu5555/pdf-viewer-reactjs/actions/workflows/continuous-integration.yaml/badge.svg)\n\nSimple react PDF Viewer component with controls like\n\n- Page navigation\n- Zoom\n- Rotation\n\nEvery element can be styled upon your preferences using default classes your own and also custom react element can be passed.\n\nInitially it was forked from [mgr-pdf-viewer-react](https://github.com/MGrin/mgr-pdf-viewer-react)\n\n### Hit the :star: on GitHub if you like it\n\n### Example: Live demo is available [here](https://ansu5555.github.io/pdf-viewer-reactjs/)\n\n# How to install\n\n```js\n\nnpm i pdf-viewer-reactjs\n\n```\n\n# Note:\n\n\u003e ### Due to causing [broken CSS issue](https://github.com/ansu5555/pdf-viewer-reactjs/issues/27) **_bulma_** \u0026 **_material-design-icons_** are removed from dependencies and code as well and added as peerDependencies.\n\u003e\n\u003e ### Please install **_bulma_** \u0026 **_material-design-icons_** from npm by yourself\n\u003e\n\u003e ```js\n\u003e npm i bulma material-design-icons\n\u003e ```\n\u003e\n\u003e ### then import them in your CSS as below\n\u003e\n\u003e ```css\n\u003e @import url('bulma/css/bulma.css');\n\u003e @import url('material-design-icons/iconfont/material-icons.css');\n\u003e ```\n\u003e\n\u003e ### Else provide custom CSS styles as per your requirement\n\n# How to use\n\n```js\nimport React from 'react'\n\nimport PDFViewer from 'pdf-viewer-reactjs'\n\nconst ExamplePDFViewer = () =\u003e {\n  return (\n    \u003cPDFViewer\n      document={{\n        url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',\n      }}\n    /\u003e\n  )\n}\n\nexport default ExamplePDFViewer\n```\n\n# Documentation\n\nReact component prop. types:\n\n**`document`:**\n\n- Type:\n\n```js\nPropTypes.shape({\n  url: String, // URL to the pdf\n\n  base64: String, // PDF file encoded in base64\n})\n```\n\n- Required: **true**\n\n- Description: Provides a way to fetch the PDF document\n\n**`password`:**\n\n- Type: _String_\n\n- Required: **false**\n\n- Description: For decrypting password-protected PDFs\n\n**`withCredentials`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: Indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false\n\n**`externalInput`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default page number, scale and rotation angle can be set initially using the props but cannot be changed dynamically, to make these props dynamic pass this prop (after passing this prop navbar will become hidden)\n\n**`page`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: The page that will be shown first on document load, also can be used to change the page number dynamically after passing `externalInput` prop\n\n**`scale`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: Scale factor relative to the component parent element, also can be used to change the scale dynamically after passing `externalInput` prop\n\n**`rotationAngle`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: Initial rotation of the document, values can be -90, 0 or 90, also can be used to change the rotation angle dynamically after passing `externalInput` prop\n\n**`scaleStep`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: Scale factor to be increased or decreased on Zoom-in or zoom-out\n\n**`minScale`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: Minimum scale factor for zoom-out\n\n**`maxScale`:**\n\n- Type: _Number_\n\n- Required: **false**\n\n- Description: Maximum scale factor for zoom-in\n\n**`onDocumentClick`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar\n\n**`onPrevBtnClick`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called on clicking on the previous page button, page number can be accessed in the function.\n\n**`onNextBtnClick`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called on clicking on the next page button, page number can be accessed in the function.\n\n**`onZoom`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called on clicking on Zoom controls, zoom scale can be accessed in the function.\n\n**`onRotation`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called on clicking on Rotation controls, rotation angle can be accessed in the function.\n\n**`getMaxPageCount`:**\n\n- Type: _Function_\n\n- Required: **false**\n\n- Description: A function that will be called on document load, total page count can be accessed in the function.\n\n**`css`:**\n\n- Type: _String_\n\n- Required: **false**\n\n- Description: CSS classes that will be setted for the component wrapper\n\n**`canvasCss`:**\n\n- Type: _String_\n\n- Required: **false**\n\n- Description: CSS classes that will be setted for the PDF page\n\n**`navbarOnTop`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default navbar is displayed on bottom, but can be placed on top by passing this prop\n\n**`hideNavbar`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default navbar is displayed, but can be hidden by passing this prop\n\n**`hideZoom`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default zoom buttons are displayed, but can be hidden by passing this prop\n\n**`hideRotation`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default rotation buttons are displayed, but can be hidden by passing this prop\n\n**`loader`:**\n\n- Type: _Node_\n\n- Required: **false**\n\n- Description: A custom loader element that will be shown while the PDF is loading\n\n**`alert`:**\n\n- Type: _Node_\n\n- Required: **false**\n\n- Description: A custom alert element that will be shown on error\n\n**`showThumbnail`:**\n\n- Type:\n\n```js\nPropTypes.shape({\n  scale: PropTypes.number, // Thumbnail scale, ranges from 1 to 5\n\n  rotationAngle: PropTypes.number, // Thumbnail rotation angle, values can be -90, 0 or 90. Default is 0\n\n  onTop: PropTypes.bool, // Thumbnail position, if set to true thumbnail will be placed on top\n\n  backgroundColor: PropTypes.string, // Color(hex or rgb) of the thumbnail container\n\n  thumbCss: PropTypes.string, // Custom css class for thumbnails\n\n  selectedThumbCss: PropTypes.string, // Custom css class for selected thumbnail\n})\n```\n\n- Required: **false**\n\n- Description: Details of the thumbnails, not shown if not provided\n\n**`protectContent`:**\n\n- Type: _Boolean_\n\n- Required: **false**\n\n- Description: By default Right Click and Context Menu are enabled, but can be disabled by passing this prop\n\n**`watermark`:**\n\n- Type:\n\n```js\nPropTypes.shape({\n  text: PropTypes.string, // Watermark text\n\n  diagonal: PropTypes.bool, // Watermark placement true for Diagonal, false for Horizontal\n\n  opacity: PropTypes.string, // Watermark opacity, ranges from 0 to 1\n\n  font: PropTypes.string, // custom font name default is 'Comic Sans MS'\n\n  size: PropTypes.string, // Font Size of Watermark\n\n  color: PropTypes.string, // Color(hex or rgb) of the watermark\n})\n```\n\n- Required: **false**\n\n- Description: Details of the watermark, not shown if not provided\n\n**`navigation`:**\n\n- Type:\n\n```js\n\nPropTypes.oneOfType([\n\n// Can be an object with css classes or react elements to be rendered\n\nPropTypes.shape({\n\ncss:  PropTypes.shape({\n\nnavbarWrapper:  String, // CSS Class for the Navbar Wrapper\n\nzoomOutBtn:  String, // CSS Class for the ZoomOut Button\n\nresetZoomBtn:  String, // CSS Class for the Reset Zoom Button\n\nzoomInBtn:  String, // CSS Class for the ZoomIn Button\n\npreviousPageBtn:  String, // CSS Class for the Previous Page button\n\npageIndicator:  String, // CSS Class for the Page Indicator\n\nnextPageBtn:  String, // CSS Class for the Next Page button\n\nrotateLeftBtn:  String, // CSS Class for the RotateLeft button\n\nresetRotationBtn:  String, // CSS Class for the Reset Rotation button\n\nrotateRightBtn:  String  // CSS Class for the RotateRight button\n\n})\n\n// Or a full navigation component\n\nPropTypes.any  // Full navigation React element\n\n]);\n\n```\n\n- Required: **false**\n\n- Description: Defines the navigation bar styles and/or elements.\n\n# Author\n\n![Image of Author](https://avatars3.githubusercontent.com/u/5373653?s=150)\n\n### Ansuman Ghosh\n\n[ansu5555.com](https://www.ansu5555.com/)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansu5555%2Fpdf-viewer-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fansu5555%2Fpdf-viewer-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansu5555%2Fpdf-viewer-reactjs/lists"}