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

    3

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    2.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • realdennis