use-input-file

React hook for creating input file

Usage no npm install needed!

<script type="module">
  import useInputFile from 'https://cdn.skypack.dev/use-input-file';
</script>

README

use-input-file

CI npm minified + gzip styled with prettier

A React hook that allows you to handle HTML <input type="file">.

DEMO

Edit

Installation

$ yarn add use-input-file

Basic Usage

import React, { useEffect } from 'react';
import useInputFile from 'use-input-file';

const App () => {
  const { ref, files } = useInputFile();

  // Check your upload files changed
  useEffect(() => {
    console.log(files);
  }, [files]);

  return (
    <input ref={ref}>
  )
};

Passing Custom ref

import React, { useEffect, useRef } from 'react';

const App () => {
  const ref = useRef(null);
  const { files } = useInputFile({ ref });

  // Check your upload files
  useEffect(() => {
    console.log(files);
  }, [files]);

  return (
    <input ref={ref}>
  )
};

Setting Input Options

You can set input file attributes by options:

const options = { multiple: true, accept: 'image/*' };
const { ref, files } = useInput({ options });

// render: <input type="file" multiple="multiple" accept="image/*">

The onChange Callback

As above, the hook default will return empty files, when the input file changed will return new files with your changed.

Sometimes you may want to custom onChange for your logic, so you can pass onChange callback argument to hook and handle input file change for you want.

const onChange = event => {
  // Doing something...
  console.log(event.currentTarget.files);
};
const { ref } = useInputFile({ onChange });

API

const { ref, file } = useInputFile({/* ...options */});

Hook Parameters

You can configure use-input-file via the below parameters:

Key Type Default Description
ref React.RefObject React.RefObject<HTMLInputElement> Passing your custom ref.
options object { accept: string, multiple: boolean } Check MDN - input type="file" for more details.
onChange function You can pass onChange callback argument to hook and handle input file change for you want.

Return Values

Key Type Default Description
ref React.RefObject React.RefObject The react ref.
files array [] The hook default will return empty File, when the input file changed will return new File with your changed.

Tests

$ make test

Lint

$ make lint

License

MIT © Peng Jie