> [!IMPORTANT]
> This repository has been moved to React league

@react-league/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-league/react-file-previewer
`

Usage

This component supports URLs and base64 encoded data.

$3

`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 = () => (



);
`

$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 (



)
};
`

$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 = () => (



);
`

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 |
| mimeType | string | Type of the file |
| name | string | Used to specify the filename when download button is clicked |