> [!IMPORTANT] > This repository has been moved to [React league](https://github.com/react-league/react-file-previewer)
npm install @react-league/react-file-previewer> [!IMPORTANT]
> This repository has been moved to React league
A browser/device-agnostic file previewer for PDF and image file types built on top of React-PDF.
```
npm i @react-league/react-file-previewer
This component supports URLs and base64 encoded data.
`javascript
import FilePreviewer from '@react-league/react-file-previewer';
export const App = () => (
$3
`javascript
import FilePreviewer from '@react-league/react-file-previewer';export const App = () => (
My App
file={{
data: "",
mimeType: 'application/pdf',
name: 'sample.pdf' // for download
}}
/>
);
`$3
`javascript
import { useState } from 'react';
import FilePreviewer from '@react-league/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
file={file}
/>
)
};
`$3
This will render the first page of the file as a thumbnail. It takes the exact same props as the default export
FilePreviewer.`javascript
import {FilePreviewerThumbnail} from '@react-league/react-file-previewer';export const App = () => (
My App
file={{
data: "",
mimeType: 'application/pdf',
name: 'sample.pdf' // for download
}}
/>
-or-
url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
/>
);
`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,
mimeType` must also be provided |