1.3.0 • Published 5 years ago
react-separated-number-input v1.3.0
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-inputoryarn 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:
import React, { useState } from 'react';
import SeparatedNumberInput from 'react-separated-number-input';
function MyApp() {
const [value, setValue] = useState('');
function onChange(event) {
setValue(event.target.value);
}
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.