A browser/device-agnostic file previewer for PDF and image file types built on top of React-PDF.
npm install react-file-previewer
npm i react-file-previewer
Usage
This component supports URLs and base64 encoded data.$3
javascript
import FilePreviewer from 'react-file-previewer';export const App = () => (
My App
/>
);
`$3
javascript
import FilePreviewer from 'react-file-previewer';export const App = () => (
My App
data: "",
mimeType: 'application/pdf',
name: 'sample.pdf' // for download
}}
/>
);
`$3
javascript
import { useState } from 'react';
import FilePreviewer from 'react-file-previewer';const PDF1_URL =
'https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf';
export const App = () => {
const [file, setFile] = useState({ url: PDF1_URL });
const onFileChange = event => {
const fileReader = new window.FileReader();
const file = event.target.files[0];
fileReader.onload = fileLoad => {
const { result } = fileLoad.target;
setFile({ url: result });
};
fileReader.readAsDataURL(file);
};
return (
My App
/>
)
};
`$3
This will render the first page of the file as a thumbnail. It takes the exact same props as the default export
.`javascript
import {FilePreviewerThumbnail} from 'react-file-previewer';export const App = () => (
My App
data: "",
mimeType: 'application/pdf',
name: 'sample.pdf' // for download
}}
/>
-or-
/>
);
`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 |
$3
| 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,