https://github.com/robcalcroft/react-use-input

🎣 A hook whose setter can be directly given to HTML inputs
https://github.com/robcalcroft/react-use-input

controlled hooks input react react-hooks

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/robcalcroft/react-use-input
• Owner: robcalcroft
• License: mit
• Created: 2019-03-13T15:39:35.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:20:10.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T17:39:19.415Z (about 1 month ago)
• Topics: controlled, hooks, input, react, react-hooks
• Language: JavaScript
• Homepage:
• Size: 317 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-input`
• awesome-react-hooks-cn - `react-use-input`
• awesome-react-hooks - `react-use-input`
• awesome-react-hooks - `react-use-input`

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(, )

```

**A simple example**

```javascript

import useInput from 'react-use-input';

function Component() {

  const [name, setName] = useInput();

  

  return ;

}

```

**Checkbox type input with non default state**

```javascript

import useInput from 'react-use-input';

function Component() {

  const [selected, setSelected] = useInput(false, 'checked');

  

  return (

    

  );

}

```

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