use-file

React hook for getting FileReader's result.

Stats

StarsIssuesVersionUpdatedCreatedSize
use-file
100.0.33 years ago3 years agoMinified + gzip package size for use-file in KB

Readme

use-file

React hook for Filereader

It exports {src,reader}, using reader to read file & get src by hooks FileReader loadend event.

Install

$ npm install use-file

How to use?

import useFile from 'use-file';
const demo = () => {
  const { result, reader } = useFile();
  // const { result, reader } = useFile('defaultPath');
  const onChange = e => {
    const files = e.currentTarget.files;
    files.length > 0 && reader.readAsDataURL(files[0]);
  };
  return (
    <div>
      <input
        onChange={onChange}
        type="file"
        id="upload-file"
        placeholder="Upload a Picture"
      />
      {result && <img src={result}>}
    </div>
  );
};

What I Do?

reader <- BlackBox {

  1. attach loadend
  2. after loadend update result from reader's result
  3. clean up if unmounted

} -> result

Why This has a dependency of useEventTarget

This is a hook infrastructure for easily package a event hooks.

See more useEventTarget.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.