react-use-file-reader v1.0.0

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.