Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neighborhood999/use-input-file
React hook for creating input file
https://github.com/neighborhood999/use-input-file
Last synced: 5 days ago
JSON representation
React hook for creating input file
- Host: GitHub
- URL: https://github.com/neighborhood999/use-input-file
- Owner: neighborhood999
- License: mit
- Created: 2020-05-18T11:28:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T14:04:14.000Z (about 2 years ago)
- Last Synced: 2025-01-30T03:46:51.498Z (20 days ago)
- Language: TypeScript
- Homepage:
- Size: 1.16 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-input-file`
- awesome-react-hooks-cn - `use-input-file`
- awesome-react-hooks - `use-input-file`
- awesome-react-hooks - `use-input-file`
README
# use-input-file
[](https://www.npmjs.com/package/use-input-file)
[](https://bundlephobia.com/result?p=use-input-file)
[](https://github.com/prettier/prettier)
A React hook that allows you to handle HTML ``.
## DEMO
[](https://codesandbox.io/s/use-input-file-demo-5wke5)
## Installation
```sh
$ yarn add use-input-file
```
## Basic Usage
```jsx
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 (
)
};
```
## Passing Custom `ref`
```jsx
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 (
)
};
```
## Setting Input Options
You can set input file attributes by `options`:
```jsx
const options = { multiple: true, accept: 'image/*' };
const { ref, files } = useInput({ options });
// render:
```
## 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.
```jsx
const onChange = event => {
// Doing something...
console.log(event.currentTarget.files);
};
const { ref } = useInputFile({ onChange });
```
## API
```js
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` | Passing your custom `ref`. |
| options | object | `{ accept: string, multiple: boolean }` | Check [MDN - input type="file"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/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](https://developer.mozilla.org/en-US/docs/Web/API/File), when the input file changed will return new [File](https://developer.mozilla.org/en-US/docs/Web/API/File) with your changed. |
## Tests
```sh
$ make test
```
## Lint
```sh
$ make lint
```
## License
MIT © [Peng Jie](https://github.com/neighborhood999/)