{"_id":"@boxwood-connor/react-doc-viewer","_rev":"1-11c129e938849f0a5aca127264f1e30d","name":"@boxwood-connor/react-doc-viewer","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@boxwood-connor/react-doc-viewer","version":"1.0.1","description":"File viewer for React.","author":{"name":"Matthew Mogford / Damian Cyntler / Connor Allen"},"keywords":["reactjs","file-viewer"],"license":"Apache License 2.0","homepage":"https://github.com/boxwood-connor/react-doc-viewer","repository":{"url":"git+https://github.com/boxwood-connor/react-doc-viewer.git"},"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","engines":{"node":">=12.0.0"},"scripts":{"start":"storybook dev -p 6006","build":"rm -rf dist && npm run build:esm && npm run build:cjs","build:esm":"tsc --noEmit false","build:cjs":"tsc --noEmit false --module commonjs --outDir ./dist/cjs","test":"react-scripts test --watchAll=false","prettier:check":"prettier --check .","prettier:fix":"prettier --write .","build-storybook":"storybook build","deploy":"npm run build-storybook && gh-pages -d storybook-static","release":"npm run prettier:check && npm run test && npm run build && release-it && npm run deploy"},"dependencies":{"@types/mustache":"^4.2.3","@types/papaparse":"^5.3.9","mustache":"^4.2.0","papaparse":"^5.4.1","react-pdf":"7.5.0","styled-components":"^6.0.8"},"devDependencies":{"@babel/core":"^7.23.0","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@storybook/addon-actions":"^7.4.6","@storybook/addon-essentials":"^7.4.6","@storybook/addon-interactions":"^7.4.6","@storybook/addon-links":"^7.4.6","@storybook/react":"^7.4.6","@storybook/react-webpack5":"^7.4.6","@storybook/testing-library":"^0.2.2","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.5.1","@types/jest":"^29.5.5","@types/node":"^20.8.3","@types/react":"^18.2.25","@types/react-dom":"^18.2.11","@types/react-pdf":"7.0.0","@types/react-router-dom":"^5.3.3","@types/styled-components":"^5.1.28","@typescript-eslint/eslint-plugin":"^6.7.4","@typescript-eslint/parser":"^6.7.4","babel-loader":"^9.1.3","eslint-plugin-storybook":"^0.6.15","file-loader":"^6.2.0","gh-pages":"^6.0.0","jest":"^29.7.0","prettier":"^3.0.3","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^5.0.1","release-it":"^16.2.1","storybook":"^7.4.6","ts-jest":"^29.1.1","typescript":"^5.2.2","webpack":"^5.88.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"_id":"@boxwood-connor/react-doc-viewer@1.0.1","gitHead":"275bd78d8c74b8def1c9dddb962278c7d41dc017","bugs":{"url":"https://github.com/boxwood-connor/react-doc-viewer/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-6NxrNvZFeX5WFafmFo+jciuZlPkXMMhYLXFcPRKgk4lUlO/SQW4DIn/RCGZl9y7cLbdNQINVm8edjZkO2ZN1Mg==","shasum":"7e40b4effa9da5ae705a914a9bbfac5fc998e932","tarball":"https://registry.npmjs.org/@boxwood-connor/react-doc-viewer/-/react-doc-viewer-1.0.1.tgz","fileCount":3,"unpackedSize":28199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSoS8HFIWIp9g5EM9iuhNq5GolTvDNl5Nu4Q4cYBhPjAiAHBKo+rwVp7R9paXj5UINwI3gIbrLhQi3EGH7uTxZWvQ=="}]},"_npmUser":{"name":"boxwood.connor","email":"connor@boxwoodcabinetry.com"},"directories":{},"maintainers":[{"name":"boxwood.connor","email":"connor@boxwoodcabinetry.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-doc-viewer_1.0.1_1706219274696_0.38322743964830663"},"_hasShrinkwrap":false},"1.0.2":{"name":"@boxwood-connor/react-doc-viewer","version":"1.0.2","description":"File viewer for React.","author":{"name":"Matthew Mogford / Damian Cyntler / Connor Allen"},"keywords":["reactjs","file-viewer"],"license":"Apache License 2.0","homepage":"https://github.com/boxwood-connor/react-doc-viewer","repository":{"url":"git+https://github.com/boxwood-connor/react-doc-viewer.git"},"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","engines":{"node":">=12.0.0"},"scripts":{"start":"storybook dev -p 6006","build":"rm -rf dist && npm run build:esm && npm run build:cjs","build:esm":"tsc --noEmit false","build:cjs":"tsc --noEmit false --module commonjs --outDir ./dist/cjs","test":"react-scripts test --watchAll=false","prettier:check":"prettier --check .","prettier:fix":"prettier --write .","build-storybook":"storybook build","deploy":"npm run build-storybook && gh-pages -d storybook-static","release":"npm run prettier:check && npm run test && npm run build && release-it && npm run deploy"},"dependencies":{"@types/mustache":"^4.2.3","@types/papaparse":"^5.3.9","mustache":"^4.2.0","papaparse":"^5.4.1","react-pdf":"7.5.0","styled-components":"^6.0.8"},"devDependencies":{"@babel/core":"^7.23.0","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@storybook/addon-actions":"^7.4.6","@storybook/addon-essentials":"^7.4.6","@storybook/addon-interactions":"^7.4.6","@storybook/addon-links":"^7.4.6","@storybook/react":"^7.4.6","@storybook/react-webpack5":"^7.4.6","@storybook/testing-library":"^0.2.2","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.5.1","@types/jest":"^29.5.5","@types/node":"^20.8.3","@types/react":"^18.2.25","@types/react-dom":"^18.2.11","@types/react-pdf":"7.0.0","@types/react-router-dom":"^5.3.3","@types/styled-components":"^5.1.28","@typescript-eslint/eslint-plugin":"^6.7.4","@typescript-eslint/parser":"^6.7.4","babel-loader":"^9.1.3","eslint-plugin-storybook":"^0.6.15","file-loader":"^6.2.0","gh-pages":"^6.0.0","jest":"^29.7.0","prettier":"^3.0.3","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^5.0.1","release-it":"^16.2.1","storybook":"^7.4.6","ts-jest":"^29.1.1","typescript":"^5.2.2","webpack":"^5.88.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"_id":"@boxwood-connor/react-doc-viewer@1.0.2","gitHead":"3bc218dd3f547350a33a7c103b80379bb9218a52","bugs":{"url":"https://github.com/boxwood-connor/react-doc-viewer/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-EpH6RxIFCkDTPBChzlS7CD0pfQ+YbqcHGLTNCz8Q3tLgTc+SxkuXfxRWb1uuPkd742JV7X+yJ++jsZ+WCj+xig==","shasum":"04e546b89b8db06425bbc8a1645013a044e9a233","tarball":"https://registry.npmjs.org/@boxwood-connor/react-doc-viewer/-/react-doc-viewer-1.0.2.tgz","fileCount":221,"unpackedSize":470092,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDLho8BeYpn6NCI6XPXQ2Gm6gWu8pGC5yHBwEbG0mGyAiEA5/CQ5BNWr/X+99LVDQAqINZ+WnyVaIpVjyXv+uTuf7A="}]},"_npmUser":{"name":"boxwood.connor","email":"connor@boxwoodcabinetry.com"},"directories":{},"maintainers":[{"name":"boxwood.connor","email":"connor@boxwoodcabinetry.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-doc-viewer_1.0.2_1706219764053_0.23858856888526336"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-25T21:47:54.595Z","1.0.1":"2024-01-25T21:47:54.843Z","modified":"2024-01-25T21:56:04.503Z","1.0.2":"2024-01-25T21:56:04.297Z"},"maintainers":[{"name":"boxwood.connor","email":"connor@boxwoodcabinetry.com"}],"description":"File viewer for React.","homepage":"https://github.com/boxwood-connor/react-doc-viewer","keywords":["reactjs","file-viewer"],"repository":{"url":"git+https://github.com/boxwood-connor/react-doc-viewer.git"},"author":{"name":"Matthew Mogford / Damian Cyntler / Connor Allen"},"bugs":{"url":"https://github.com/boxwood-connor/react-doc-viewer/issues"},"license":"Apache License 2.0","readme":"# @boxwood-connor/react-doc-viewer\r\n\r\nFile viewer for React.\r\n\r\n> This is a fork of https://github.com/cyntler/react-doc-viewer (would re render on window resize and I didn't need that)\r\n\r\n## Supported file types\r\n\r\n| Extension | MIME Type |\r\n| --------- | ------------------------------------------------------------------------- |\r\n| bmp | image/bmp |\r\n| csv | text/csv |\r\n| odt | application/vnd.oasis.opendocument.text |\r\n| doc | application/msword |\r\n| docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |\r\n| gif | image/gif |\r\n| htm | text/htm |\r\n| html | text/html |\r\n| jpg | image/jpg |\r\n| jpeg | image/jpeg |\r\n| pdf | application/pdf |\r\n| png | image/png |\r\n| ppt | application/vnd.ms-powerpoint |\r\n| pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |\r\n| tiff | image/tiff |\r\n| txt | text/plain |\r\n| xls | application/vnd.ms-excel |\r\n| xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |\r\n| mp4 | video/mp4 |\r\n\r\n## Installation\r\n\r\nUse one of the package managers for Node.js.\r\n\r\n```bash\r\n npm i @boxwood-connor/react-doc-viewer\r\n```\r\n\r\n## Usage\r\n\r\n> **Warning:** _By default the component height will expand and contract to the current loaded file. The width will expand to fill the parent._\r\n\r\n### Basic\r\n\r\nDocViewer requires at least an array of document objects to function.\r\nEach document object must have a uri to a file, either a url that returns a file or a local file.\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRenderers } from \"@cyntler/react-doc-viewer\";\r\n\r\nfunction App() {\r\n const docs = [\r\n { uri: \"https://url-to-my-pdf.pdf\" }, // Remote file\r\n { uri: require(\"./example-files/pdf.pdf\") }, // Local File\r\n ];\r\n\r\n return ;\r\n}\r\n```\r\n\r\n### Initial Active Document\r\n\r\nBy default, the first item in your `documents` array will be displayed after the component is rendered. However, there is a prop `initialActiveDocument` that you can point to the initial document that should be displayed.\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRenderers } from \"@cyntler/react-doc-viewer\";\r\n\r\nconst App = () => {\r\n const docs = [\r\n { uri: \"https://url-to-my-pdf.pdf\" }, // Remote file\r\n { uri: require(\"./example-files/pdf.pdf\") }, // Local File\r\n ];\r\n\r\n return (\r\n \r\n );\r\n};\r\n```\r\n\r\n### Control over the displayed document\r\n\r\nFrom version **1.11.0** you can control the displayed document through two props: `activeDocument` and `onDocumentChange`.\r\n\r\n```jsx\r\nconst DocViewerControlOverDisplayedDocument = () => {\r\n const docs = [\r\n { uri: \"https://url-to-my-pdf.pdf\" }, // Remote file\r\n { uri: require(\"./example-files/pdf.pdf\") }, // Local File\r\n ];\r\n const [activeDocument, setActiveDocument] = useState(docs[0]);\r\n\r\n const handleDocumentChange = (document) => {\r\n setActiveDocument(document);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n );\r\n};\r\n```\r\n\r\n### Displaying blob/uploaded documents\r\n\r\nSince **v1.6.2** you can use documents in the form of blobs, which allows you to e.g. display uploaded files.\r\n\r\n```jsx\r\nconst DocViewerWithInputApp = () => {\r\n const [selectedDocs, setSelectedDocs] = useState([]);\r\n\r\n return (\r\n <>\r\n \r\n el.target.files?.length &&\r\n setSelectedDocs(Array.from(el.target.files))\r\n }\r\n />\r\n ({\r\n uri: window.URL.createObjectURL(file),\r\n fileName: file.name,\r\n }))}\r\n pluginRenderers={DocViewerRenderers}\r\n />\r\n \r\n );\r\n};\r\n```\r\n\r\n### Included Renderers\r\n\r\nTo use the included renderers.\r\n`DocViewerRenderers` is an Array of all the included renderers.\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRenderers } from \"@cyntler/react-doc-viewer\";\r\n\r\n;\r\n```\r\n\r\nOr you can import individual renderers.\r\n\r\n```tsx\r\nimport DocViewer, { PDFRenderer, PNGRenderer } from \"@cyntler/react-doc-viewer\";\r\n\r\n;\r\n```\r\n\r\n### Custom Renderer\r\n\r\nTo create a custom renderer, that will just exist for your project.\r\n\r\n```tsx\r\nimport React from \"react\";\r\nimport DocViewer from \"@cyntler/react-doc-viewer\";\r\n\r\nconst MyCustomPNGRenderer: DocRenderer = ({\r\n mainState: { currentDocument },\r\n}) => {\r\n if (!currentDocument) return null;\r\n\r\n return (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nMyCustomPNGRenderer.fileTypes = [\"png\", \"image/png\"];\r\nMyCustomPNGRenderer.weight = 1;\r\n```\r\n\r\nAnd supply it to `pluginRenderers` inside an `Array`.\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRenderers } from \"@cyntler/react-doc-viewer\";\r\n\r\n;\r\n```\r\n\r\n### Custom File Loader\r\n\r\nIf you need to prevent the actual loading of the file by `@cyntler/react-doc-viewer`.
\r\nYou can decorate your custom renderer with a callback to do as you wish. e.g. Load the file yourself in an iFrame.\r\n\r\n```tsx\r\nMyCustomPNGRenderer.fileLoader = ({\r\n documentURI,\r\n signal,\r\n fileLoaderComplete,\r\n}) => {\r\n myCustomFileLoaderCode().then(() => {\r\n // Whenever you have finished you must call fileLoaderComplete() to remove the loading animation\r\n fileLoaderComplete();\r\n });\r\n};\r\n```\r\n\r\n## Theme\r\n\r\nYou can provide a theme object with one or all of the available properties.\r\n\r\n```xml\r\n\r\n```\r\n\r\n## Custom pre-fetch HTTP Verb\r\n\r\nSome services (such as AWS) provide URLs that works only for one pre-configured verb.\r\nBy default, `@cyntler/react-doc-viewer` fetches document metadata through a `HEAD` request in order to guess its `Content-Type`.\r\nIf you need to have a specific verb for the pre-fetching, use the `prefetchMethod` option on the DocViewer:\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRenderers } from \"@cyntler/react-doc-viewer\";\r\n\r\n;\r\n```\r\n\r\n## Custom Request Headers\r\n\r\nProvide request headers, i.e. for authenticating with an API etc.\r\n\r\n```tsx\r\nconst headers = {\r\n \"X-Access-Token\": \"1234567890\",\r\n \"My-Custom-Header\": \"my-custom-value\",\r\n};\r\n\r\n;\r\n```\r\n\r\n## Internationalization (i18n)\r\n\r\nFrom **v1.6.0** you can pass the `language` prop to the `DocViewer` component to get translated sentences and words that can be displayed by this library.\r\n\r\n```xml\r\n\r\n```\r\n\r\nThe translations are based on the `.json` files that can be found in the `src/locales` directory.\r\n\r\n## Styling\r\n\r\nAny styling applied to the `` component, is directly applied to the main `div` container.\r\n\r\n#### CSS Class\r\n\r\n```xml\r\n\r\n```\r\n\r\n#### CSS Class Default Override\r\n\r\nEach component / div already has a DOM id that can be used to style any part of the document viewer.\r\n\r\n```css\r\n#react-doc-viewer #header-bar {\r\n background-color: #faf;\r\n}\r\n```\r\n\r\n#### React Inline\r\n\r\n```xml\r\n\r\n```\r\n\r\n#### Styled Components\r\n\r\n```tsx\r\nimport styled from \"styled-components\";\r\n\r\n// ...\r\n\r\n;\r\n\r\n// ...\r\n\r\nconst MyDocViewer = styled(DocViewer)`\r\n border-radius: 10px;\r\n`;\r\n```\r\n\r\n## Using DocViewerRef\r\n\r\nSince **v1.13.0** you can control the display of the document with `reference`.\r\n\r\n```tsx\r\nimport DocViewer, { DocViewerRef } from \"@cyntler/react-doc-viewer\";\r\n\r\nexport const UsingRef = () => {\r\n const docViewerRef = useRef(null);\r\n\r\n return (\r\n <>\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n```\r\n\r\n## Config\r\n\r\nYou can provide a config object, which configures parts of the component as required.\r\n\r\n```tsx\r\n\r\n```\r\n\r\n### Overriding Header Component\r\n\r\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.\r\nParameters include the state object from the main component, and document navigation functions for `previousDocument` and `nextDocument`.\r\n\r\nExample:\r\n\r\n```tsx\r\nconst MyHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {\r\n if (!state.currentDocument || state.config?.header?.disableFileName) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n
{state.currentDocument.uri || \"\"}
\r\n
\r\n \r\n = state.documents.length - 1}\r\n >\r\n Next Document\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\n;\r\n```\r\n\r\n### Overriding Loading Renderer\r\n\r\nYou can pass a callback function to `config.loadingRenderer.overrideComponent` that returns a React Element.\r\n\r\nExample:\r\n\r\n```tsx\r\nconst MyLoadingRenderer = ({ document, fileName }) => {\r\n const fileText = fileName || document?.fileType || \"\";\r\n\r\n if (fileText) {\r\n return
Loading Renderer ({fileText})...
;\r\n }\r\n\r\n return
Loading Renderer...
;\r\n};\r\n\r\n;\r\n```\r\n\r\nBy default, the loading component is rendered if document loading process takes more than 500 ms.\r\n\r\nYou can change this time value or disable this feature to make the component display immediately:\r\n\r\n```tsx\r\nconst MyLoadingRenderer = ({ document, fileName }) => {\r\n ...\r\n};\r\n\r\n;\r\n```\r\n\r\n### Overriding No Renderer (Error)\r\n\r\nYou can pass a callback function to `config.noRenderer.overrideComponent` that returns a React Element.\r\n\r\nExample:\r\n\r\n```tsx\r\nconst MyNoRenderer = ({ document, fileName }) => {\r\n const fileText = fileName || document?.fileType || \"\";\r\n\r\n if (fileText) {\r\n return
No Renderer Error! ({fileText})
;\r\n }\r\n\r\n return
No Renderer Error!
;\r\n};\r\n\r\n;\r\n```\r\n","readmeFilename":"README.md"}