@invisionag/iris-react-digit-input
v1.6.9
Published
```js import DigitInput from '@invisionag/iris-react-digit-input'; ```
Downloads
56
Maintainers
Keywords
Readme
import DigitInput from '@invisionag/iris-react-digit-input';
react-digit-input
is a component that allows you to format inputs by clearly dividing them into each digit. It renders an input field for each digit and combines them into a single value again when needed.
Usage
Basic
Renders 6 one digit input fields that act like a single input.
<DigitInput
onValueChange={value => {
console.log(value);
}}
/>
length
The length
prop determines the maximum length of the value and the number of input fields rendered. The default length is 6.
<DigitInput
length={8}
onValueChange={value => {
console.log(value);
}}
/>
Other
All other props such as event handlers or html attributes will be passed down directly to each of the rendered input fields.
<DigitInput
placeholder="0"
onKeyDown={e => {
e.stopPropagation();
}}
onValueChange={value => {
console.log(value);
}}
/>