{"_id":"@abstractops/react-doc-viewer","_rev":"3-ffdcdad160fb6c32d08d950aa4448948","name":"@abstractops/react-doc-viewer","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.6":{"name":"@abstractops/react-doc-viewer","version":"0.1.6","description":"Document viewer for react. Renders online/local documents.","author":{"name":"Matthew Mogford"},"license":"ISC","repository":{"url":"git+https://github.com/abstractops/react-doc-viewer.git"},"publishConfig":{"@bkakadiya42:registry":"https://npm.pkg.github.com"},"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":"48f8c170337c17e288f7dda414bde3c0058c7f92","bugs":{"url":"https://github.com/abstractops/react-doc-viewer/issues"},"homepage":"https://github.com/abstractops/react-doc-viewer#readme","_id":"@abstractops/react-doc-viewer@0.1.6","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rcocWAEH3hcwzB1/FK4irbxjpTuqWdf88lfUSklMxIZehCMiMpAAc0c9Fr9nZc1tRxKCjp6oY4wDPVGZ60Yzog==","shasum":"b73fc29feb585bda805646efc36c6714d265efa7","tarball":"https://registry.npmjs.org/@abstractops/react-doc-viewer/-/react-doc-viewer-0.1.6.tgz","fileCount":81,"unpackedSize":176228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoEghCRA9TVsSAnZWagAA+9YP/j8aqlLfXujHXFuz0itp\nvLjntGuneCKbgMUc+VDYa1y2hTML3Ptc3Xi5j9RlcK4V9axeQ7jcWEbRdDBX\nKsnPpaGwTDrRHE494mqIjdTO0iUgC54G6XQi1cE5dbwJbZJJ72wUagnhaDTw\npbA3ChA9XlEtlOkGsw0cqaj3Ff1QCjc/vDV6PGfvtrxuOlhMCUmP6xb5NLnj\nhKFzcxB6kiyXbV/K3TjjcesFvoPsCaeVCOOCmv1Jo36dq8sIV0wMg/KDoRRK\n4nk8fGgKy06tMsOi4rJP0gyDLrb4IZRObY0nboYKD0hc/QmFl3R6ZedgrefD\nqEHTwfu3hIAb9BpLr5bDl0bLC6XVAQo2dOPHgtq9KNVHg0TL4A6QS8U6F8Lv\n1rdYFa732us/NZ2379xJQNR6iXs0o6rlv7Y56sHaFJXTtQlv+bNbsF/N7y5z\no6jJ7940ZvCkpoAzmCDVfkPiI830Ti7AQNHMJ9ECK43mj7pcZsNMusg+N0Kn\nnM1wSZc3Dv1YUESJfIAfkAHZocv8y4LzJN9zGkOdX5QzXqvu+T/wK2ypKq9r\nUNqxcWKtjrWjaQMvID7vsB8ypQ2tYhqjZ9HKGVAkIf7S1hwtijqF0tDqN0Vm\nvk4+scDje3vRG722fsNCdQEEa1mBZi2Mi1/rhWjmKnRZIrbsvMhOhMLKBWRQ\nyKVA\r\n=Q20d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDebkERzHoheJut3N7LHByqxnvvAQQMUWD7rGPxbU3KNwIhAOPRV+9xZHLMfF7idyxWyGdKT10Du50MkqvCkLLsrc1M"}]},"_npmUser":{"name":"kakadiya91","email":"bkakadiya42@gmail.com"},"directories":{},"maintainers":[{"name":"kakadiya91","email":"bkakadiya42@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-doc-viewer_0.1.6_1637894177227_0.9674610233364362"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-26T02:36:17.190Z","0.1.6":"2021-11-26T02:36:17.399Z","modified":"2023-08-23T20:31:49.371Z"},"maintainers":[{"email":"eng@abstractops.com","name":"abstractops-eng"}],"description":"Document viewer for react. Renders online/local documents.","homepage":"https://github.com/abstractops/react-doc-viewer#readme","repository":{"url":"git+https://github.com/abstractops/react-doc-viewer.git"},"author":{"name":"Matthew Mogford"},"bugs":{"url":"https://github.com/abstractops/react-doc-viewer/issues"},"license":"ISC","readme":"# react-doc-viewer\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\nMyCustomPNGRenderer.fileTypes = [\"png\", \"image/png\"];\nMyCustomPNGRenderer.weight = 1;\n```\n\nAnd supply it to DocViewer > pluginRenderers inside an `Array`.\n\n```tsx\nimport DocViewer, { DocViewerRenderers } from \"react-doc-viewer\";\n\n;\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 );\n};\n\nexport default JPGRenderer;\n\n// List the MIME types that this renderer will respond to\nJPGRenderer.fileTypes = [\"jpg\", \"jpeg\", \"image/jpg\", \"image/jpeg\"];\n\n// If you have more than one renderer for the same MIME type, use weight. higher is more preferable.\n// Included renderers have a weight of zero\nJPGRenderer.weight = 1;\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"}