react-preview-file

> Efficient way of rendering an image preview from a File

Installation

``
$ yarn add react-preview-file
`

Usage

simple

`javascript
import FilePreview from 'react-preview-file';

render() {
const file = new File(['someBase64'], 'me.png');
return (

{(preview) => }

)
}

`

full

`javascript
import FilePreview from 'react-preview-file';

class App extends React.Component {
onInputChange = e => {
const { currentTarget: { files } } = e;

this.setState({files[0]});
}

render() {
const {file} = this.state;

return (


)
}
}

``

API

* file: File
* children: (preview: string) => ReactNode

Motivation

- Avoid multiple re-renders: FilePreview uses URL.createObjectURL instead of FileReader, the first one happens asynchronously and avoids dealing with state and multiple re-renders 👁
- Automatically revoke: FilePreview takes care for you of revoke the created preview. This makes memory usage as efficient as possible 🔥
- Efficient preview generation: Not only createObjectURL is faster than FileReader.readAsDataURL byt it also produces fixed length strings, instead of massive base64 strings ⚡️