https://github.com/zzarcon/react-preview-file

Efficient image preview rendering from files :zap:
https://github.com/zzarcon/react-preview-file

createobjecturl file filereader image preview react

Last synced: 3 months ago
JSON representation

Efficient image preview rendering from files :zap:

• Host: GitHub
• URL: https://github.com/zzarcon/react-preview-file
• Owner: zzarcon
• License: mit
• Created: 2018-03-02T00:27:15.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-27T09:40:31.000Z (over 6 years ago)
• Last Synced: 2024-11-11T06:41:36.716Z (3 months ago)
• Topics: createobjecturl, file, filereader, image, preview, react
• Language: TypeScript
• Homepage: https://zzarcon.github.io/react-preview-file
• Size: 167 KB
• Stars: 9
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-preview-file [![Build Status](https://travis-ci.org/zzarcon/react-preview-file.svg?branch=master)](https://travis-ci.org/zzarcon/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 (

      


        

        

          {(preview) => }

        

      

    )

  }

}


```

# API

* **file**: [File](https://developer.mozilla.org/en-US/docs/Web/API/File)

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

# Motivation

- Avoid multiple re-renders: **FilePreview** uses [URL.createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) instead of [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), the first one happens asynchronously and avoids dealing with state and multiple re-renders 👁

- Automatically revoke: **FilePreview** takes care for you of [revoke](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL) the created preview. This makes memory usage as efficient as possible 🔥

- Efficient preview generation: Not only **createObjectURL** is faster than [FileReader.readAsDataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) byt it also produces fixed length strings, instead of massive base64 strings ⚡️