use-file

0.0.3 • Public • Published

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.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i use-file

    Weekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    2.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • realdennis