{"_id":"@agronom81/react-doc-viewer","_rev":"1-7f717f043a78c0647dbb1a00668797bb","name":"@agronom81/react-doc-viewer","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@agronom81/react-doc-viewer","version":"0.1.0","description":"Document viewer for react. Renders online/local documents.","author":{"name":"Matthew Mogford / Pavlo Petrenko"},"license":"Apache License 2.0","repository":{"url":"git+https://github.com/Alcumus/react-doc-viewer.git"},"main":"build/index.js","types":"build/index.d.ts","dependencies":{"pdfjs-dist":"2.4.456","react-pdf":"5.0.0","styled-components":"^5.1.1","wl-msg-reader":"^0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","@types/jest":"^24.0.0","@types/node":"^12.0.0","@types/pdfjs-dist":"2.1.5","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","@types/react-pdf":"4.0.5","@types/styled-components":"^5.1.2","generate-changelog":"^1.8.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"3.4.3","typescript":"^3.9.7"},"scripts":{"start":"react-scripts start","build":"rm -rf build && tsc -p tsconfig-npm.json","test":"react-scripts test","eject":"react-scripts eject","version:patch":"npm run version:pre && npm run version:changelog && npm version patch && npm run version:post","version:minor":"npm run version:pre && npm run version:changelog && npm version minor && npm run version:post","version:major":"npm run version:pre && npm run version:changelog && npm version major && npm run version:post","version:pre":"if [ $(git rev-parse --abbrev-ref HEAD) != 'master' ]; then echo \"\\033[1m\\033[31mCurrently on $(git rev-parse --abbrev-ref HEAD) branch. Please checkout master.\\033[0m\"; exit 1; else exit 0; fi","version:changelog":"changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md'","version:post":"git push origin master && git push origin master --tags","build-release:patch":"react-scripts test --watchAll=false && npm run build && npm run version:patch","build-release:minor":"react-scripts test --watchAll=false && npm run build && npm run version:minor","build-release:major":"react-scripts test --watchAll=false && npm run build && npm run version:major"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"b59dab55cce7e474ae2598edbc6f101754cb89f7","bugs":{"url":"https://github.com/Alcumus/react-doc-viewer/issues"},"homepage":"https://github.com/Alcumus/react-doc-viewer#readme","_id":"@agronom81/react-doc-viewer@0.1.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-rXMa33oHFxTeQHJAGc2bVJ31fPK4C11DhCHmxFRxHwnqYshUBhW/nFoFgwPmCfIl4XneZbBqaAN2UMt/mn20Dw==","shasum":"d0b8fa0fbdc87d18e6cc927faa86c627538cf306","tarball":"https://registry.npmjs.org/@agronom81/react-doc-viewer/-/react-doc-viewer-0.1.0.tgz","fileCount":3,"unpackedSize":26568,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjqjQUH4XiVEKZOwBYj7KqdDG8DcCbfhHC8+TijqT2sAIhAO3c07WSt1fC+dzEivdbTBX7U6XdVgBWKzFqPoQ8DPuw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeIDaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgZg/9GyAuxLhhrUM3UPYpIVW0EZ9bT5RjKz3XGz3B3v1I6mdDqL6h\r\n7ZlmRlqQHhwQuL3bNOncglD1TkjWBPddVnq+5kn6c+8sZHbVMafOiuvnhLBA\r\n9ssvbkM8SVvfdYsviFfuA3nRo1Szv7A0YjOGqJYETunsFjyuxnIvO1Cql2hh\r\nT9PncUUi9LtmZoDTIeYUxM8VRrIHI37MXPJWKZ6d+iQo80EQNOnlCE4OeijZ\r\nDwCTRrfBPLO++x4d1n9GGdfcHw6ytpqT82xVRxDP/W19vioaHpX9jNaBIqKD\r\nxQULEzn2T4KpmU1UUE5M+2RhjKjCkfGn0wXgCgy38qc+sZn0vc/Rykx2Gdrd\r\nskATbQ748HSnOkM+qlJTns6lYBv0rWlWC/4j7eSrgEP4wU5A9qQVrJ33mDjm\r\njVAltIixE1Na9i9p7PERB1ZbM3fGq06xWmPYwmJ+avX7xh8MaqZTOXpqOo3x\r\n0BRfwTT6AoGZqK4USwXJNTEVTdE2qccoiMUNE0ujbA46+6Ap2LgEzvv8Ftu+\r\n5VCIy8PxV5pJLWc/ln+yhcPT2e22hQWXk9hpg+e7QuRJujXlME9MzKH1BuPd\r\nN/zhuv8PnXA63USuH+xOUfSga1aJyyeKOImLKXr4HJnqaB9xqA1n7Vn4C8tC\r\nrzk05OS+p66jvNuPi91Bj/TukqhRc1u4S1E=\r\n=RPcZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"agronom81","email":"agronom81@gmail.com"},"directories":{},"maintainers":[{"name":"agronom81","email":"agronom81@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-doc-viewer_0.1.0_1668841690104_0.48357575901925887"},"_hasShrinkwrap":false},"0.1.1":{"name":"@agronom81/react-doc-viewer","version":"0.1.1","description":"Document viewer for react. Renders online/local documents.","author":{"name":"Matthew Mogford / Pavlo Petrenko"},"license":"Apache License 2.0","repository":{"url":"git+https://github.com/Alcumus/react-doc-viewer.git"},"main":"build/index.js","types":"build/index.d.ts","dependencies":{"pdfjs-dist":"2.4.456","react-pdf":"5.0.0","styled-components":"^5.1.1","wl-msg-reader":"^0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","@types/jest":"^24.0.0","@types/node":"^12.0.0","@types/pdfjs-dist":"2.1.5","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","@types/react-pdf":"4.0.5","@types/styled-components":"^5.1.2","generate-changelog":"^1.8.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"3.4.3","typescript":"^3.9.7"},"scripts":{"start":"react-scripts start","build":"rm -rf build && tsc -p tsconfig-npm.json","test":"react-scripts test","eject":"react-scripts eject","version:patch":"npm run version:pre && npm run version:changelog && npm version patch && npm run version:post","version:minor":"npm run version:pre && npm run version:changelog && npm version minor && npm run version:post","version:major":"npm run version:pre && npm run version:changelog && npm version major && npm run version:post","version:pre":"if [ $(git rev-parse --abbrev-ref HEAD) != 'master' ]; then echo \"\\033[1m\\033[31mCurrently on $(git rev-parse --abbrev-ref HEAD) branch. Please checkout master.\\033[0m\"; exit 1; else exit 0; fi","version:changelog":"changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md'","version:post":"git push origin master && git push origin master --tags","build-release:patch":"react-scripts test --watchAll=false && npm run build && npm run version:patch","build-release:minor":"react-scripts test --watchAll=false && npm run build && npm run version:minor","build-release:major":"react-scripts test --watchAll=false && npm run build && npm run version:major"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"75cf03663fc1858276c167232415244f59b67154","bugs":{"url":"https://github.com/Alcumus/react-doc-viewer/issues"},"homepage":"https://github.com/Alcumus/react-doc-viewer#readme","_id":"@agronom81/react-doc-viewer@0.1.1","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-j8xjHANvgPv9+H69+wmWKBhWhU5YeHQjYQCW8QiPgSCJN+HFvIJAuTfcgiGc4qA8pF8vNHvownaoFAYso1wgiw==","shasum":"d82f501adbfffe937a818a02fb12ca480e30dd13","tarball":"https://registry.npmjs.org/@agronom81/react-doc-viewer/-/react-doc-viewer-0.1.1.tgz","fileCount":79,"unpackedSize":166678,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDUnSxAF3e2S6BnaDw1fqOlZGcaOB4TAXPrRpdg2tnrAIhAJaIeSLFhtRsh/J0mm0g+fI0puW8dRhVV4kW2vyeOtw2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeIKiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPwg//d6u4xUxWltVvUb0SI2mY564v3S75LIkQV25L8KzsdTLe+pOS\r\n2HYiNxl7Qhlmy5l/zVCu7ZHv64FQMEuvogmDV9McAor6kMryIMyI1yH5Oetf\r\n6rddenbdOnrPzRKOqyDF8WM3/to6fi1GoVczy0T8tWe+SUNln6eJdihGTt/c\r\ndxke3jUNNDsESGPmfY4O9UrulW7/sc5tthNeiMj6ufJco2qsUIlaCG7b918j\r\ncnME0NHveGQeOW9OP69nj1ThpH/JitYp7S5ZtC3nukmfDLB6oEupkwPOW/36\r\nCwlcJOg2mId4eAFhsa6LuJg9OO8MUFPAkn6CUarTKzXJnD+6tZZcFaCdhOmY\r\n2iciUAGQ/zw/tnuT6rt/mw8Y7ChgddzqTFkpAabdd3DxVM6AmHeL7uLjbWR2\r\nUhg98p16FHsm58fTGRlbMy3KgoHnZXK8yOSIHQwWcLGUn97slTwGdCKn0SC9\r\nS1G4AM9S4esB19GGXR8/ajDfVj+17zR7k9ujj9ryrylq14fsoCgGoInQD7AD\r\nwwpcnosRbmdKV9x8ockDkyBOOVj3VBQF2Hf9wrbvywOyWwz/dUA1VNQXxUIt\r\nySD5MyHLk/plC+NF1m/oHfU5dNyJpeEpYXvqpkr5ZRuQW7qNAbHU5BIMRR/d\r\nEtnaMvZqqH2W5DfguaTzD+q6GvPIR0sQQ/c=\r\n=kOMA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"agronom81","email":"agronom81@gmail.com"},"directories":{},"maintainers":[{"name":"agronom81","email":"agronom81@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-doc-viewer_0.1.1_1668842146742_0.3612777350538614"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-19T07:08:10.043Z","0.1.0":"2022-11-19T07:08:10.275Z","modified":"2022-11-19T07:15:46.937Z","0.1.1":"2022-11-19T07:15:46.874Z"},"maintainers":[{"name":"agronom81","email":"agronom81@gmail.com"}],"description":"Document viewer for react. Renders online/local documents.","homepage":"https://github.com/Alcumus/react-doc-viewer#readme","repository":{"url":"git+https://github.com/Alcumus/react-doc-viewer.git"},"author":{"name":"Matthew Mogford / Pavlo Petrenko"},"bugs":{"url":"https://github.com/Alcumus/react-doc-viewer/issues"},"license":"Apache License 2.0","readme":"# react-doc-viewer\n\n> This is a fork of https://github.com/Alcumus/react-doc-viewer (delete pdf download button)\n\n# Contents\n\n- [Current Renderable File Types](#current-renderable-file-types)\n- [Installation](#installation)\n - [Core](#core)\n- [Usage](#usage)\n - [Basic](#basic)\n - [Included Renderers](#included-renderers)\n - [Custom Renderer](#custom-renderer)\n - [Themed](#themed)\n - [Styling](#styling)\n - [CSS Class](#css-class)\n - [CSS Class Default Override](#css-class-default-override)\n - [React Inline](#react-inline)\n - [StyledComponent](#styledcomponent)\n - [Config](#config)\n- [Contributing](#contributing)\n - [Creating a Renderer Plugin](#creating-a-renderer-plugin)\n- [Overriding Header Component](#overriding-header-component)\n- [API](#api)\n\n
\n
\n\n## Current Renderable File Types\n\n| Extension | MIME Type | Available |\n| --------- | ---------------------------------------------------------------------------------- | --------- |\n| bmp | image/bmp | `✓` |\n| doc | application/msword | `✓` |\n| docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document | `✓` |\n| htm | text/htm | `✓` |\n| html | text/html | `✓` |\n| jpg | image/jpg | `✓` |\n| jpeg | image/jpeg | `✓` |\n| pdf | application/pdf | `✓` |\n| png | image/png | `✓` |\n| ppt | application/vnd.ms-powerpoint | `✓` |\n| pptx | applicatiapplication/vnd.openxmlformats-officedocument.presentationml.presentation | `✓` |\n| tiff | image/tiff | `✓` |\n| txt | text/plain | `✓` |\n| xls | application/vnd.ms-excel | `✓` |\n| xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | `✓` |\n\n
\n
\n\n## Installation\n\n### Core\n\n```bash\n npm i react-doc-viewer\n # or\n yarn add react-doc-viewer\n```\n\n## Usage\n\n> **Warning** - _By default the component height will expand and contract to the current loaded file. The width will expand to fill the parent._\n\n
\n
\n\n### Basic\n\nDocViewer requires at least an array of document objects to function.\nEach document object must have a uri to a file, either a url that returns a file or a local file.\n\n```tsx\nimport DocViewer from \"react-doc-viewer\";\n\nfunction App() {\n const docs = [\n { uri: \"https://url-to-my-pdf.pdf\" },\n { uri: require(\"./example-files/pdf.pdf\") }, // Local File\n ];\n\n return ;\n}\n```\n\n### Included Renderers\n\nTo use the included renderers.\n`DocViewerRenderers` is an Array of all the included renderers.\n\n```tsx\nimport DocViewer, { DocViewerRenderers } from \"react-doc-viewer\";\n\n;\n```\n\nOr you can import individual renderers.\n\n```tsx\nimport DocViewer, { PDFRenderer, PNGRenderer } from \"react-doc-viewer\";\n\n;\n```\n\n
\n
\n\n### Custom Renderer\n\nTo create a custom renderer, that will just exist for your project.\n\n```tsx\nimport React from \"react\";\nimport DocViewer from \"react-doc-viewer\";\n\nconst MyCustomPNGRenderer: DocRenderer = ({\n mainState: { currentDocument },\n}) => {\n if (!currentDocument) return null;\n\n return (\n \n
\n
\n
\n\n### Custom File Loader\n\nIf you need to prevent the actual loading of the file by `react-doc-viewer`.\nyou can decorate your custom renderer with a callback to do as you wish. e.g. Load the file yourself in an iFrame.\n\n```tsx\nMyCustomPNGRenderer.fileLoader = ({\n documentURI,\n signal,\n fileLoaderComplete,\n}) => {\n myCustomFileLoaderCode().then(() => {\n // Whenever you have finished you must call fileLoaderComplete() to remove the loading animation\n fileLoaderComplete();\n });\n};\n```\n\n
\n
\n\n### Themed\n\nYou can provide a theme object with one or all of the available properties.\n\n```xml\n\n```\n\n### Styling\n\nAny styling applied to the `` component, is directly applied to the main `div` container.\n\n#### - CSS Class\n\n```xml\n\n```\n\n#### - CSS Class Default Override\n\nEach component / div already has a DOM id that can be used to style any part of the document viewer.\n\n```css\n#react-doc-viewer #header-bar {\n background-color: #faf;\n}\n```\n\n#### - React Inline\n\n```xml\n\n```\n\n#### - StyledComponent\n\n```tsx\nimport styled from \"styled-components\";\n//...\n;\n//...\nconst MyDocViewer = styled(DocViewer)`\n border-radius: 10px;\n`;\n```\n\n### Config\n\nYou can provide a config object, which configures parts of the component as required.\n\n```xml\n\n```\n\n
\n
\n\n## Contributing\n\n### Creating a Renderer Plugin\n\n**Step 1** - Create a new folder inside `src/plugins`.\n\n> e.g. `src/plugins/jpg`\n\nInside this folder, create a Renderer React Typescript file.\n\n> e.g. `index.tsx`\n\n**Step 2** - Inside JPGRenderer, export a functional component of type `DocRenderer`\n\n```tsx\nimport React from \"react\";\nimport { DocRenderer } from \"../../types\";\n\n// Be sure that Renderer correctly uses type DocRenderer\nconst JPGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {\n if (!currentDocument) return null;\n\n return (\n \n
\n
\n\nIf you are creating a new renderer, also update `src/plugins/index.ts` with an import to your new renderer file, and Export it as part of the DocViewerRenderers `Array`.\n\n```typescript\n// ...\nimport JPGRenderer from \"./jpg\";\n\nexport const DocViewerRenderers = [\n // ...\n JPGRenderer,\n];\n```\n\n
\n
\n\n## Overriding Header Component\n\nYou can pass a callback function to `config.header.overrideComponent` that returns a React Element. The function's parameters will be populated and usable, this function will also be re-called whenever the mainState updates.\nParameters include the state object from the main component, and document navigation functions for `previousDocument` and `nextDocument`.\n\nExample:\n\n```tsx\n\nconst myHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {\n if (!state.currentDocument || state.config?.header?.disableFileName) {\n return null;\n }\n\n return (\n <>\n {state.currentDocument.uri || \"\"}
\n \n \n Previous Document\n \n = state.documents.length - 1}\n >\n Next Document\n \n
\n \n );\n };\n\n\n```\n\n## API\n\n---\n\n### `DocViewer props`\n\n| name | type |\n| ---------------- | ------------------------------- |\n| documents | [`IDocument[]`](#idocument) |\n| className? | `string` |\n| style? | `React.CSSProperties` |\n| config? | [`IConfig`](#iconfig) |\n| theme? | [`ITheme`](#itheme) |\n| pluginRenderers? | [`DocRenderer[]`](#docrenderer) |\n\n---\n\n### `IDocument`\n\n| name | type |\n| --------- | -------- |\n| uri | `string` |\n| fileType? | `string` |\n| fileData? | `string | ArrayBuffer` - **Used Internally - Ignored if passed into props** |\n\n---\n\n### `IConfig`\n\n| name | type |\n| ------- | --------------------------------- |\n| header? | [`IHeaderConfig`](#iheaderconfig) |\n\n---\n\n### `IHeaderConfig`\n\n| name | type |\n| ------------------ | ------------------------------------- |\n| disableHeader? | `boolean` |\n| disableFileName? | `boolean` |\n| retainURLParams? | `boolean` |\n| overrideComponent? | [`IHeaderOverride`](#iheaderoverride) |\n\n---\n\n### `IHeaderOverride` () => `ReactElement | null`\n\n| name | type |\n| ---------------- | --------------------------- |\n| state | [`IMainState`](#imainstate) |\n| previousDocument | `() => void` |\n| nextDocument | `() => void` |\n| `returns` | `ReactElement | null` |\n\n---\n\n### `ITheme`\n\n| name | type |\n| ---------------------- | --------- |\n| primary? | `string` |\n| secondary? | `string` |\n| tertiary? | `string` |\n| text_primary? | `string` |\n| text_secondary? | `string` |\n| text_tertiary? | `string` |\n| disableThemeScrollbar? | `boolean` |\n\n---\n\n### `DocRenderer` extends React.FC\\<[`DocRendererProps`](#docrendererprops)\\>\n\n| name | type |\n| ----------- | --------------------------------------------- |\n| fileTypes | `string[]` |\n| weight | `number` |\n| fileLoader? | [`FileLoaderFunction`](#fileloaderfunction) ` | null | undefined` |\n\n---\n\n### `FileLoaderFunction`\n\n(props: [`FileLoaderFuncProps`](#fileloaderfuncprops)) => void\n\n---\n\n### `FileLoaderFuncProps`\n\n| name | type |\n| ------------------ | ------------------------------------------- |\n| documentURI | `string` |\n| signal | `AbortSignal` |\n| fileLoaderComplete | [`FileLoaderComplete`](#fileloadercomplete) |\n\n---\n\n### `FileLoaderComplete`\n\n| name | type |\n| ---------- | ------------ |\n| fileReader | `FileReader` |\n\n---\n\n### `DocRendererProps`\n\n| name | type |\n| --------- | --------------------------- |\n| mainState | [`IMainState`](#imainstate) |\n\n---\n\n### `IMainState`\n\n| name | type |\n| ---------------- | --------------------------- |\n| currentFileNo | number |\n| documents | [`IDocument[]`](#idocument) |\n| documentLoading? | boolean |\n| currentDocument? | [`IDocument`](#idocument) |\n| rendererRect? | DOMRect |\n| config? | [`IConfig`](#iconfig) |\n\n---\n","readmeFilename":"README.md"}