Gathering detailed insights and metrics for @dankom/react-file-previewer
Gathering detailed insights and metrics for @dankom/react-file-previewer
A browser/device-agnostic file previewer for PDF, JPG, and PNG filetypes built on top of React-PDF
Installations
npm install @dankom/react-file-previewerDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.17.1
NPM Version
7.19.0
Releases
Unable to fetch releases
Languages
2
JavaScript
CSS
JavaScript (89.48%)
CSS (10.52%)
Developer
vendorpay
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
28 Stars
106 Commits
21 Forks
3 Watchers
39 Branches
7 Contributors
Updated on Mar 01, 2025
Maintainers
1
Package Meta Information
Latest Version
0.8.2
Package Id
@dankom/react-file-previewer@0.8.2
Unpacked Size
185.26 kB
Size
37.47 kB
File Count
33
NPM Version
7.19.0
Node Version
14.17.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
8
Peer Dependencies
1
Dev Dependencies
24
@babel/compat-data@babel/preset-envbabel-loader@babel/core@babel/preset-react@storybook/addon-actions@storybook/addon-links@storybook/addons@storybook/reactbabel-jestclassnameshuskyjestlint-stagedprettierprop-typesreactreact-domreact-test-rendererrimrafrolluprollup-plugin-babelrollup-plugin-bundle-sizerollup-plugin-copy
react-file-previewer
A browser/device-agnostic file previewer for PDF and image file types built on top of React-PDF.
Installation
npm i react-file-previewer
Usage
This component supports URLs and base64 encoded data.
Basic Usage
1import FilePreviewer from 'react-file-previewer'; 2 3export const App = () => ( 4 <div> 5 <h1>My App</h1> 6 <FilePreviewer file={{ 7 url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}} 8 /> 9 </div> 10);
Base64 Usage
1import FilePreviewer from 'react-file-previewer'; 2 3export const App = () => ( 4 <div> 5 <h1>My App</h1> 6 <FilePreviewer 7 file={{ 8 data: "<base64 string>", 9 mimeType: 'application/pdf', 10 name: 'sample.pdf' // for download 11 }} 12 /> 13 </div> 14);
Using with HTML file input
1import { useState } from 'react'; 2import FilePreviewer from 'react-file-previewer'; 3 4const PDF1_URL = 5 'https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf'; 6 7export const App = () => { 8 const [file, setFile] = useState({ url: PDF1_URL }); 9 10 const onFileChange = event => { 11 const fileReader = new window.FileReader(); 12 const file = event.target.files[0]; 13 14 fileReader.onload = fileLoad => { 15 const { result } = fileLoad.target; 16 setFile({ url: result }); 17 }; 18 19 fileReader.readAsDataURL(file); 20 }; 21 22 return ( 23 <div> 24 <h1>My App</h1> 25 <input type="file" onChange={onFileChange} /> 26 <FilePreviewer 27 file={file} 28 /> 29 </div> 30 ) 31};
Using it as a thumbnail
This will render the first page of the file as a thumbnail. It takes the exact same props as the default export
FilePreviewer.
1import {FilePreviewerThumbnail} from 'react-file-previewer'; 2 3export const App = () => ( 4 <div> 5 <h1>My App</h1> 6 <FilePreviewerThumbnail 7 file={{ 8 data: "<base64 string>", 9 mimeType: 'application/pdf', 10 name: 'sample.pdf' // for download 11 }} 12 /> 13 -or- 14 <FilePreviewerThumbnail file={{ 15 url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}} 16 /> 17 </div> 18);
FilePreviewer Props
| Prop name | Type | Description |
|---|---|---|
| file | object | Refer to file object |
| onClick | function | Event handler for when viewer is clicked |
| hideControls | bool | If 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls |
FilePreviewerThumbnail Props
| Prop name | Type | Description |
|---|---|---|
| file | object | Refer to file object |
| onClick | function | Event handler for when viewer is clicked |
| hideControls | bool | If 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls |
| style | object | Any css style overrides |
File Object
| Prop name | Type | Description |
|---|---|---|
| url | string | This can be used by itself with no other prop |
| data | string | Base64 encoded string of file. If used, mimeType must also be provided |
| mimeType | string | Type of the file |
| name | string | Used to specify the filename when download button is clicked |
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
Found 10/12 approved changesets -- score normalized to 8
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/vendorpay/react-file-previewer/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vendorpay/react-file-previewer/release.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 28 are checked with a SAST tool
Reason
43 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gp8f-8m3g-qvj9
- Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
- Warn: Project is vulnerable to: GHSA-f82v-jwr5-mffw
- Warn: Project is vulnerable to: GHSA-fr5h-rqp8-mj6g
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4
- Warn: Project is vulnerable to: GHSA-3h52-269p-cp9r
- Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
- Warn: Project is vulnerable to: GHSA-87hq-q4gp-9wr4
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Score
3.2
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More