react-preview-file
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

react-preview-file

Efficient way of rendering an image preview from a File

Installation

$ yarn add react-preview-file

Usage

simple

import FilePreview from 'react-preview-file';
 
render() {
  const file = new File(['someBase64'], 'me.png');
  return (
    <FilePreview file={file}>
      {(preview) => <img src={preview} />}
    </FilePreview>
  )
}
 

full

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 (
      <div>
        <input type="file" onChange={this.onChange} />
        <FilePreview file={file}>
          {(preview) => <img src={preview} />}
        </FilePreview>
      </div>
    )
  }
}
 

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 ⚡️

Readme

Keywords

none

Package Sidebar

Install

npm i react-preview-file

Weekly Downloads

102

Version

0.1.3

License

MIT

Unpacked Size

272 kB

Total Files

34

Last publish

Collaborators

  • zzarcon