# react-use-input

> A hook whose setter can be directly given to HTML inputs

Latest version **1.3.2** (published 2021-02-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-input
pnpm add react-use-input
yarn add react-use-input
bun add react-use-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2021-02-15 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Rob Calcroft |
| Maintainers | robcalcroft |

## Links

- npm: https://www.npmjs.com/package/react-use-input
- Repository: git@github.com:robcalcroft/react-use-input
- npm.io page: https://npm.io/package/react-use-input

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.8.6

## Recent versions

- 1.3.2 (latest) — 2021-02-15
- 1.3.1 — 2020-01-02
- 1.3.0 — 2019-04-16
- 1.2.0 — 2019-03-18
- 1.1.0 — 2019-03-13
- 1.0.0 — 2019-03-13

## README

# react-use-input
A hook :fishing_pole_and_fish: whose setter can be directly given to HTML inputs

This package is designed to be super simple and small; it won't add any bloat to your project. However, feel free to copy and paste the [code](https://raw.githubusercontent.com/robcalcroft/react-use-input/master/index.js) if you'd like to avoid another dependency :smile:

Other packages use object spread syntax to achieve a similar result, but this package doesn't because:
- This way is much easier to read
- You don't end up with bloat in your props for super simple use cases

## Install
```
yarn add react-use-input
```

## Use
By default, `useInput()` returns a tuple of the current value and a setter which will pick the `value` key out of an `Event` object.

```javascript
useInput(<initialValue (defaults to '') (optional)>, <valueKey (defaults to 'value') (optional)>)
```

**A simple example**

```javascript
import useInput from 'react-use-input';

function Component() {
  const [name, setName] = useInput();
  
  return <input value={name} onChange={setName} />;
}
```

**Checkbox type input with non default state**

```javascript
import useInput from 'react-use-input';

function Component() {
  const [selected, setSelected] = useInput(false, 'checked');
  
  return (
    <input type="checkbox" checked={selected} onChange={setSelected} />
  );
}
```

Feel free to raise an issue to discuss other use cases that aren't covered here

---
_Source: https://npm.io/package/react-use-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._