npm

Need private packages and team management tools?Check out npm Orgs. »

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.

install

npm i use-file

Downloadsweekly downloads

2

version

0.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability