https://github.com/d-asensio/use-controlled-input-number

React hook to turn numeric input behavior into pretty much what you expect
https://github.com/d-asensio/use-controlled-input-number

Last synced: about 1 month ago
JSON representation

React hook to turn numeric input behavior into pretty much what you expect

• Host: GitHub
• URL: https://github.com/d-asensio/use-controlled-input-number
• Owner: d-asensio
• Created: 2020-07-27T12:56:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-07T08:58:34.000Z (almost 3 years ago)
• Last Synced: 2024-07-31T07:15:45.143Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 932 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

README

        

# use-controlled-input-number

*React hook to turn numeric input behavior into pretty much what you expect*

[![npm version](https://badge.fury.io/js/use-controlled-input-number.svg)](https://badge.fury.io/js/use-controlled-input-number)

While it is not obvious at first glance, numeric inputs are not simple. Especially if you want to use the value that is typed in to calculate something, since **they return a string instead of a number**.

This hook is intended to solve this problem in the easiest possible way, giving you all the control over the input, but making it behave as you would expect (always returning a number).



  

    

      

        

          

        

        

          

        

      

    

  



> You can find these examples in [codesandbox](https://codesandbox.io/s/example-1-d0fny?file=/src/App.js)

## Installation

```bash

yarn add use-controlled-input-number

```

## Usage

This is an example of use for this hook:

```javascript

function ControlledInput () {

  const [value, setValue] = useState(1)

  const inputProps = useControlledInputNumber({

    value, // The value will always be of type number

    onChange: setValue

  })

  return (

    

  )

}

```

## Related projects

- [use_stepper](https://github.com/wKovacs64/use-stepper): If you want a hook that fully controls the behavior of the input.