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);
  }}
/>