React-Separated-Number-Input
A number input that automatically puts the separators in as you type.
tl;dr
- Install by executing
npm install react-separated-number-input
oryarn add react-separated-number-input
. - Import by adding
import SeparatedNumberInput from 'react-separated-number-input'
. - Use by adding
<SeparatedNumberInput groupLengths={[4, 4, 4, 4]} />
.
Demo
Minimal demo page is included in sample directory.
Online demo is also available!
Installation
Add React-Separated-Number-Input to your project by executing npm install react-separated-number-input
or yarn add react-separated-number-input
.
Usage
Here's an example of basic usage:
;; { const value setValue = ; { ; } return <SeparatedNumberInput onChange=onChange groupLengths=4 4 4 4 value=value /> ;}
User guide
SeparatedNumberInput
Displays the input.
Props
Prop name | Description | Example values |
---|---|---|
defaultValue | Defines the default value for SeparatedNumberInput used as an uncontrolled input. | "1234" |
groupLengths | Defines lengths of the groups the input should split the numbers into. For example, given value "12345678" and groupLengths [1, 2, 3] the input will display 1 23 456 . |
[4, 4, 4, 4] |
inputRef | A function that behaves like ref, but it's passed to the <input> rendered by <SeparatedNumberInput> component. |
(ref) => { this.input = ref; } |
onChange | Defines the function to update the value when it changes in SeparatedNumberInput used as a controlled input. | (event) => console.log(event.target.value); |
value | Defines the value to display for SeparatedNumberInput used as a controlled input. | "1234" |
Note: You can also safely pass almost any other prop you would pass to <input>
element. Exceptions are listed below.
Unsupported props
inputMode
- it's required for React-Separated-Number-Input to trigger numeric keyboard on mobile devices.
License
The MIT License.
Author
![]() |
Wojciech Maj kontakt@wojtekmaj.pl http://wojtekmaj.pl |