react-preview-file's Introduction

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

react-preview-file's People

Contributors

Stargazers

Watchers

react-preview-file's Issues

Small readme issues

Hey,

Love the plugin; does exactly what it says on the tin! However, there are a few problems on the readme.

On NPM it says the wrong title (react-file-preview vs react-preview-file)(might need a new publish of the source) and in the code snippet example, you forgot to mention the 'return' statement of the img tag.

Small things that could really help your code become more popular!
Good luck!
Thanks again!