{"_id":"@andaleeb/react-pdf-js","_rev":"2-875ba3ec2da08ec1bd8137ce434d3314","name":"@andaleeb/react-pdf-js","description":"A React component to wrap PDF.js","dist-tags":{"latest":"3.0.4"},"versions":{"3.0.4":{"name":"@andaleeb/react-pdf-js","version":"3.0.4","description":"A React component to wrap PDF.js","main":"./lib/index.js","jsnext:main":"./src/index.js","repository":{"type":"git","url":"git+https://github.com/andaleebroomy/react-pdf-js.git"},"scripts":{"build":"npm run build:lib && npm run build:umd && npm run build:umd:min","build:lib":"babel src --out-dir lib","build:umd":"webpack src/index.js dist/react-pdf-js.js --config webpack.config.development.js","build:umd:min":"webpack src/index.js dist/react-pdf-js.min.js --config webpack.config.production.js","clean":"rimraf dist lib","lint":"eslint src --ext .js --ext .jsx","prepublish":"npm run lint && npm run clean && npm run build"},"keywords":["react","reactjs","pdf","pdfjs"],"author":{"name":"Syed Andaleeb Roomy","email":"andaleebcse@gmail.com","url":"http://github.com/andaleebroomy"},"license":"MIT","bugs":{"url":"https://github.com/andaleebroomy/react-pdf-js/issues"},"homepage":"https://github.com/andaleebroomy/react-pdf-js","peerDependencies":{"react":">=15.3","react-dom":">=15.3","webpack":"^2.0.0 || ^3.0.0"},"dependencies":{"pdfjs-dist":"^2.0.203","prop-types":"^15.6.0"},"devDependencies":{"babel-cli":"6.26.0","babel-core":"6.26.0","babel-eslint":"8.0.3","babel-loader":"7.1.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.6.1","babel-preset-react":"6.24.1","babel-preset-stage-2":"6.24.1","babel-runtime":"6.26.0","eslint":"4.13.0","eslint-config-airbnb":"16.1.0","eslint-plugin-import":"2.8.0","eslint-plugin-jsx-a11y":"6.0.2","eslint-plugin-react":"7.5.1","react":"16.2.0","react-dom":"16.2.0","rifraf":"2.0.3","rimraf":"2.6.2","webpack":"3.10.0"},"npmName":"react-pdf-js","npmFileMap":[{"files":["dist/*.js","lib/*.js","src/*.js"]}],"gitHead":"5752c6385d63b1f47ba2c609b63b1a236f0733cc","_id":"@andaleeb/react-pdf-js@3.0.4","_shasum":"5b7d61b2e63c37c5c8ae5326ade853f5f22a13d7","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.2","_npmUser":{"name":"andaleeb","email":"andaleebcse@gmail.com"},"dist":{"shasum":"5b7d61b2e63c37c5c8ae5326ade853f5f22a13d7","tarball":"https://registry.npmjs.org/@andaleeb/react-pdf-js/-/react-pdf-js-3.0.4.tgz","integrity":"sha512-H9BLVVFyRcqtb0ej9un8vH3rHqIiKZCrlVBYE6x7S5+bG9C8QLTKECYfhe8qYblkrtGQc35uKcFKhPbM4e2gxw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRrTc7bOFVXh4KlD5Iu+F/+HG8gcbuTeJfmgj5yiIUUAiAnymiBB61ak75WW3XCUPiEQgWkU6bUiZ0WOls7PgdRWg=="}]},"maintainers":[{"name":"andaleeb","email":"andaleebcse@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pdf-js-3.0.4.tgz_1513964015282_0.7412938461638987"}}},"readme":"# react-pdf-js\n---\n[![NPM Version](https://img.shields.io/npm/v/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js)\n[![Build Status](https://img.shields.io/travis/mikecousins/react-pdf-js/master.svg?style=flat-square)](https://travis-ci.org/mikecousins/react-pdf-js)\n[![Dependency Status](https://david-dm.org/mikecousins/react-pdf-js.svg)](https://david-dm.org/mikecousins/react-pdf-js)\n[![devDependency Status](https://david-dm.org/mikecousins/react-pdf-js/dev-status.svg)](https://david-dm.org/mikecousins/react-pdf-js#info=devDependencies)\n[![bitHound Overall Score](https://www.bithound.io/github/mikecousins/react-pdf-js/badges/score.svg)](https://www.bithound.io/github/mikecousins/react-pdf-js)\n\n`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/). Written for React 15/16 and ES2015 using the Airbnb style guide.\n\n---\n\nUsage\n-----\n\nInstall with `npm install react-pdf-js`\n\nUse in your app (showing some basic pagination as well):\n\n```js\nimport React from 'react';\nimport PDF from 'react-pdf-js';\n\nclass MyPdfViewer extends React.Component {\n  state = {};\n\n  onDocumentComplete = (pages) => {\n    this.setState({ page: 1, pages });\n  }\n\n  onPageComplete = (page) => {\n    this.setState({ page });\n  }\n\n  handlePrevious = () => {\n    this.setState({ page: this.state.page - 1 });\n  }\n\n  handleNext = () => {\n    this.setState({ page: this.state.page + 1 });\n  }\n\n  renderPagination = (page, pages) => {\n    let previousButton = <li className=\"previous\" onClick={this.handlePrevious}><a href=\"#\"><i className=\"fa fa-arrow-left\"></i> Previous</a></li>;\n    if (page === 1) {\n      previousButton = <li className=\"previous disabled\"><a href=\"#\"><i className=\"fa fa-arrow-left\"></i> Previous</a></li>;\n    }\n    let nextButton = <li className=\"next\" onClick={this.handleNext}><a href=\"#\">Next <i className=\"fa fa-arrow-right\"></i></a></li>;\n    if (page === pages) {\n      nextButton = <li className=\"next disabled\"><a href=\"#\">Next <i className=\"fa fa-arrow-right\"></i></a></li>;\n    }\n    return (\n      <nav>\n        <ul className=\"pager\">\n          {previousButton}\n          {nextButton}\n        </ul>\n      </nav>\n      );\n  }\n\n  render() {\n    let pagination = null;\n    if (this.state.pages) {\n      pagination = this.renderPagination(this.state.page, this.state.pages);\n    }\n    return (\n      <div>\n        <PDF\n          file=\"somefile.pdf\"\n          onDocumentComplete={this.onDocumentComplete}\n          onPageComplete={this.onPageComplete}\n          page={this.state.page}\n        />\n        {pagination}\n      </div>\n    )\n  }\n}\n\nmodule.exports = MyPdfViewer;\n```\n\n## Scaling\n\nThe PDF can be scaled in a couple of different ways.\n\n### Stretch to fill width/height\n\nUse the prop `fillWidth` to make the PDF stretch to the width of the parent element (generally speaking, this will be the enclosing `<div>`), or use `fillHeight` to do the same for the height of the PDF. The PDF will be scaled proportionately.\n\nBoth `fillWidth` and `fillHeight` default to `false`.\n\nNote: `fillWidth` has precedence over `fillHeight`. So if you use both, the PDF will stretch to fill the width.\n\nExample:\n\n```js\n<div className=\"parentDivWhoseWidthAndHeightAreUsedToStretchThePdf\">\n  <PDF\n    file=\"somefile.pdf\"\n    fillWidth\n    fillHeight // this will be ignored because fillWidth is also passed\n  />\n</div>\n```\n\n### Set scale directly\n\nYou can also set the scale manually by passing the `scale` prop. A `scale` between `0` and `1` shrinks the PDF, and a `scale` greater than `1` enlarges it.\n\n`scale` defaults to `1`.\n\nNote: the value of `scale` will be ignored if you also use `fillWidth` or `fillHeight`.\n\nExample:\n\n```js\n<div>\n  <PDF\n    file=\"somefile.pdf\"\n    scale={1.5}\n  />\n</div>\n```\n\n## Credit\n\nThis project is a fork of [react-pdf-js](https://github.com/mikecousins/react-pdf-js) which itself was a fork of [react-pdfjs](https://github.com/erikras/react-pdfjs) which itself was a port of [react-pdf](https://github.com/nnarhinen/react-pdf), so thank you to\nthe original authours.\n","maintainers":[{"name":"andaleeb","email":"andaleebcse@gmail.com"}],"time":{"modified":"2022-06-12T14:40:23.346Z","created":"2017-12-22T17:33:37.004Z","3.0.4":"2017-12-22T17:33:37.004Z"},"homepage":"https://github.com/andaleebroomy/react-pdf-js","keywords":["react","reactjs","pdf","pdfjs"],"repository":{"type":"git","url":"git+https://github.com/andaleebroomy/react-pdf-js.git"},"author":{"name":"Syed Andaleeb Roomy","email":"andaleebcse@gmail.com","url":"http://github.com/andaleebroomy"},"bugs":{"url":"https://github.com/andaleebroomy/react-pdf-js/issues"},"license":"MIT","readmeFilename":"README.md"}