# timmeister7-react-file-previewer

> file previewer without download

Latest version **1.0.1** (published 2021-01-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install timmeister7-react-file-previewer
pnpm add timmeister7-react-file-previewer
yarn add timmeister7-react-file-previewer
bun add timmeister7-react-file-previewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-01-28 |
| First published | 2021-01-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 31.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | timmeister7 |
| Maintainers | timmeister7 |

## Links

- npm: https://www.npmjs.com/package/timmeister7-react-file-previewer
- Repository: https://github.com/timmeister7/react-file-previewer
- Homepage: https://github.com/timmeister7/react-file-previewer#readme
- Issues: https://github.com/timmeister7/react-file-previewer/issues
- npm.io page: https://npm.io/package/timmeister7-react-file-previewer

## Dependencies (8)

- [ramda](https://npm.io/package/ramda.md) ^0.27.0
- [react-pdf](https://npm.io/package/react-pdf.md) ^4.1.0
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.2
- [mime-types](https://npm.io/package/mime-types.md) ^2.1.26
- [mdi-material-ui](https://npm.io/package/mdi-material-ui.md) ^6.12.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.3
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1
- [react-intersection-observer](https://npm.io/package/react-intersection-observer.md) ^8.26.1

## Recent versions

- 1.0.1 (latest) — 2021-01-28
- 1.0.0 — 2021-01-28

## README

# 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
```javascript
import FilePreviewer from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewer file={{
            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
        />
    </div>
);
```

### Base64 Usage
```javascript
import FilePreviewer from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewer 
            file={{
                data: "<base64 string>",
                mimeType: 'application/pdf',
                name: 'sample.pdf' // for download
            }}
        />
    </div>
);
```

### Using with HTML file input
```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 (
        <div>
            <h1>My App</h1>
            <input type="file" onChange={onFileChange} />
            <FilePreviewer 
                file={file}
            />
        </div>
    )
};
```

### 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`.

```javascript
import {FilePreviewerThumbnail} from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewerThumbnail 
            file={{
                data: "<base64 string>",
                mimeType: 'application/pdf',
                name: 'sample.pdf' // for download
            }}
        />
        -or-
        <FilePreviewerThumbnail file={{
            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
        />
    </div>
);
```

## FilePreviewer Props

| Prop name    | Type     | Description |
|:-------------|:---------|:------------|
| file         | object   | Refer to [file object](#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](#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 |

---
_Source: https://npm.io/package/timmeister7-react-file-previewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._