Package Exports
- use-file
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-file) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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-fileHow 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 {
- attach loadend
- after loadend update result from reader's result
- 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.