react-use-file-reader

1.0.0 • Public • Published

Use File Reader

This is a React hook to use the FileReader api.

Usage

export const MyComponent = prop => {
  const [{ result, error, loading }, setFile] = useFileReader({
    method: 'readAsDataURL',
  })
 
  const onInputFile = e => {
    setFile(e.target.files[0])
  }
 
  return (
    <>
      {loading ? <p>Reading file</p> : null}
      {error ? <p>{error.message}</p> : null}
      {result ? <img src={result} /> : null}
      <input type="file" accept=".jpg,.png,.svg" onInput={onInputFile} />
    </>
  )
}

Options

method [String] - This is the read method you would use like: readAsText readAsDataURL. readAsText is the default. onload [Function] - This fire onload event of the reader. This parameter is the result of the file reader.

Readme

Keywords

Package Sidebar

Install

npm i react-use-file-reader

Weekly Downloads

4

Version

1.0.0

License

ISC

Unpacked Size

6.59 kB

Total Files

7

Last publish

Collaborators

  • ~jcblw