{"_id":"@afzalimdad9/react-file-preview","_rev":"1-f03c90b922e3c0338aee2b3487204c6b","name":"@afzalimdad9/react-file-preview","dist-tags":{"latest":"1.0.37"},"versions":{"1.0.36":{"name":"@afzalimdad9/react-file-preview","version":"1.0.36","keywords":["react","typescript","file-previewer","file-viewer","react-file-previewer","react-file-viewer","file","preview","url viewer","csv viewer","text viewer","pdf viewer","html viewer","image viewer","audio viewer","video viewer","doc viewer"],"author":{"name":"afzalimdad9"},"license":"MIT","_id":"@afzalimdad9/react-file-preview@1.0.36","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"homepage":"https://github.com/afzalimdad9/React-File-Previewer#readme","bugs":{"url":"https://github.com/afzalimdad9/React-File-Previewer/issues"},"dist":{"shasum":"a6a2b7508d171fae58c54b85e9e7e6d8db0d425f","tarball":"https://registry.npmjs.org/@afzalimdad9/react-file-preview/-/react-file-preview-1.0.36.tgz","fileCount":9,"integrity":"sha512-JQ0NN7FAKvhNOL4DUNTACo/rwPMCsznkxiEj15SnaWXCcqz6ciuf2d7q4hgYlGUeHUuJ/lps9mVKh6I4P60btA==","signatures":[{"sig":"MEUCIQDhwyxOhC8z1yr9Y6ZUiFyh+YHVtS9mIMUzCJZch4VjYwIgHysCo8Knv+qFDgxt67ItvPywWQPtUrnulfWPk7lgXaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85448},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.ts","gitHead":"08eefbede41f4439254a0efa0ca2d3815971587f","scripts":{"lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","test":"echo \"Error: no test specified\" && exit 1","build":"parcel build","prepare":"npm run build","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"","prepublishOnly":"npm run prettier && npm run lint"},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"repository":{"url":"git+https://github.com/afzalimdad9/React-File-Previewer.git","type":"git"},"_npmVersion":"10.8.2","description":"The url previewer is built using native html  elements for previewing url of files of the following type","directories":{},"_nodeVersion":"20.17.0","dependencies":{"mime":"^3.0.0","react":"^18.2.0","react-virtuoso":"^4.0.3","react-file-icon":"^1.3.0","styled-components":"^5.3.6","comma-separated-values":"^3.6.4"},"_hasShrinkwrap":false,"devDependencies":{"buffer":"^5.7.1","eslint":"^8.31.0","parcel":"^2.8.2","process":"^0.11.10","prettier":"^2.8.1","react-dom":"^18.2.0","ts-loader":"^9.4.2","typescript":"^4.9.4","@types/mime":"^3.0.1","@types/node":"^22.10.6","@types/react":"^18.0.26","path-browserify":"^1.0.1","@types/react-dom":"^18.0.10","@types/react-table":"^7.7.14","@parcel/packager-ts":"^2.8.2","eslint-plugin-react":"^7.31.11","@types/react-file-icon":"^1.0.1","eslint-config-prettier":"^8.6.0","eslint-plugin-prettier":"^4.2.1","@types/styled-components":"^5.1.26","@typescript-eslint/parser":"^5.48.0","eslint-plugin-react-hooks":"^4.6.0","@typescript-eslint/eslint-plugin":"^5.48.0","@parcel/transformer-typescript-types":"^2.8.2"},"_npmOperationalInternal":{"tmp":"tmp/react-file-preview_1.0.36_1736951351122_0.3712268002844523","host":"s3://npm-registry-packages-npm-production"}},"1.0.37":{"name":"@afzalimdad9/react-file-preview","version":"1.0.37","description":"The url previewer is built using native html  elements for previewing url of files of the following type","source":"src/index.ts","main":"dist/main.js","module":"dist/module.js","types":"dist/types.d.ts","scripts":{"build":"parcel build","test":"echo \"Error: no test specified\" && exit 1","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"","prepare":"npm run build","prepublishOnly":"npm run prettier && npm run lint"},"repository":{"type":"git","url":"git+https://github.com/afzalimdad9/React-File-Previewer.git"},"keywords":["react","typescript","file-previewer","file-viewer","react-file-previewer","react-file-viewer","file","preview","url viewer","csv viewer","text viewer","pdf viewer","html viewer","image viewer","audio viewer","video viewer","doc viewer"],"author":{"name":"afzalimdad9"},"license":"MIT","devDependencies":{"@parcel/packager-ts":"^2.8.2","@parcel/transformer-typescript-types":"^2.8.2","@types/mime":"^3.0.1","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/react-file-icon":"^1.0.1","@types/react-table":"^7.7.14","@types/styled-components":"^5.1.26","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","buffer":"^5.7.1","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","parcel":"^2.8.2","path-browserify":"^1.0.1","prettier":"^2.8.1","process":"^0.11.10","react-dom":"^18.2.0","ts-loader":"^9.4.2","typescript":"^4.9.4"},"dependencies":{"@afzalimdad9/comma-separated-values":"^4.0.1","mime":"^3.0.0","react":"^18.2.0","react-file-icon":"^1.3.0","react-virtuoso":"^4.0.3","styled-components":"^5.3.6"},"_id":"@afzalimdad9/react-file-preview@1.0.37","gitHead":"9d011dc116175c02ccdecd0aef9ae90e9eba3073","bugs":{"url":"https://github.com/afzalimdad9/React-File-Previewer/issues"},"homepage":"https://github.com/afzalimdad9/React-File-Previewer#readme","_nodeVersion":"18.20.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-42GG75XFGuXcdpNUsW7nAwyVka31vZ/TuztWCPBggmfxhOhY4ykXlEV2oRmaMDbBfUNHQVvPy5AckcZ9z3kTMQ==","shasum":"4cfc622a1f3f0d6f83ca394683d194c73b387a0d","tarball":"https://registry.npmjs.org/@afzalimdad9/react-file-preview/-/react-file-preview-1.0.37.tgz","fileCount":48,"unpackedSize":120873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhlCbke5NUpolv3vAOje9cabmfC63phKO27mr2LAdjuAiAR6EZy8XHQaSnn+9UDBJEv4ejvSjtpmPb/J1cuar0qYQ=="}]},"_npmUser":{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"},"directories":{},"maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-file-preview_1.0.37_1736969983586_0.3118503492527027"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-15T14:29:10.997Z","modified":"2025-01-15T19:39:43.933Z","1.0.36":"2025-01-15T14:29:11.291Z","1.0.37":"2025-01-15T19:39:43.759Z"},"bugs":{"url":"https://github.com/afzalimdad9/React-File-Previewer/issues"},"author":{"name":"afzalimdad9"},"license":"MIT","homepage":"https://github.com/afzalimdad9/React-File-Previewer#readme","keywords":["react","typescript","file-previewer","file-viewer","react-file-previewer","react-file-viewer","file","preview","url viewer","csv viewer","text viewer","pdf viewer","html viewer","image viewer","audio viewer","video viewer","doc viewer"],"repository":{"type":"git","url":"git+https://github.com/afzalimdad9/React-File-Previewer.git"},"description":"The url previewer is built using native html  elements for previewing url of files of the following type","maintainers":[{"name":"afzalimdad9","email":"afzalimdad9@gmail.com"}],"readme":"# react-file-preview\r\n\r\n\r\nThe url previewer is built using native html  elements for previewing url of files of the following type\r\n\r\n* csv files\r\n* text files\r\n* pdf files\r\n* html files\r\n* image files (supported by the browser)\r\n* audio files (supported by the browser)\r\n* video files (supported by the browser)\r\n* docx, xlsx, pptx files\r\n\r\nAlso, for unsupported files or when an error occurs, it falls back to using an icon.\r\n# Installation\r\n\r\n```python\r\nnpm i @afzalimdad9/react-file-preview\r\n```\r\n\r\n# Usage\r\nCurrently, the file supports only urls, in the future hopefully it can be extended to files also.\r\n\r\nBasic Usage\r\n\r\n```javascript\r\nimport React, { useState } from 'react'\r\nimport FileViewer from '@afzalimdad9/react-file-preview'\r\n\r\nexport default function Demo() {\r\n  const [file, setFile] = useState<string>('')\r\n  const [mimeType, setMimeType] = useState<string>()\r\n  const [name, setName] = useState<string>('image.jpg')\r\n\r\n  return (\r\n    <>\r\n      <div>\r\n        <label>File url</label>\r\n        <br />\r\n        <input type='text' onChange={(e) => setFile(e.target.value)} />\r\n      </div>\r\n      <div>\r\n        <label>File mimeType</label>\r\n        <br />\r\n        <input type='text' onChange={(e) => setMimeType(e.target.value)} value={mimeType} />\r\n      </div>\r\n      <div>\r\n        <label>File name</label>\r\n        <br />\r\n        <input type='text' onChange={(e) => setName(e.target.value)} value={name} />\r\n      </div>\r\n      <div\r\n        style={{\r\n          height: '500px',\r\n          width: '500px',\r\n        }}\r\n      >\r\n        <FileViewer\r\n          loader={undefined}\r\n          mimeType={mimeType}\r\n          src={file}\r\n          onError={(e) => {\r\n            console.log(e)\r\n          }}\r\n          fileName={name}\r\n        />\r\n      </div>\r\n    </>\r\n  )\r\n}\r\n\r\n```\r\n\r\n# FileViewer Props\r\n\r\n| Prop name        |            Type             |  Description |\r\n|--------------|:---------------------------:|-----------:|\r\n| src      |           string            | The url of the file to be previewed |\r\n| mimetype      |      string (optional)      | Used to specify the mimetype of the file and determine how to preview the url, alternatively filename can be used |\r\n| filename      |      string (optional)      | The file extension is used to specify the mimetype of the file and determine how to preview the url, alternatively mimetype can be used |\r\n| loader |    ReactNode (optional)     | A loader to replace the default loader used by the project |\r\n| onError      | (e: any) => void (optional) | A callback that can be used to detect if an error has occurred in the loading of the files|\r\n| autoPlay |           boolean           | To autoplay a video or an audio\r\n| containerErrorStyle |     React.CSSProperties     | The style of the container when an error occurs\r\n","readmeFilename":"README.md"}