Simple single character input boxes.
npm install react-individual-character-input-boxes

React Individual Character Input Boxes (RICIBs) are individual inputs that are separate from each other but functionally act similar as a regular input box. Motivation came from Apples similar input boxes used for their two-factor authorization:
!apple input boxes
$ npm i --save react-individual-character-input-boxesjs
import RICIBs from 'react-individual-character-input-boxes';
`
Example code:
`js
handleOutput (string) {
// Do something with the string
} render () {
return (
amount={5}
autoFocus
handleOutputString={this.handleOutput}
inputProps={[
{ className: "first-box" },
{ style: { "color": "orange" } },
{ placeholder: "_" }
]}
inputRegExp={/^[0-9]$/}
/>
)
}
`
Props:| Prop | Type | Required | Description |
| :--- | :--- | :---: | :--- |
|
amount | Number | | sets the number of input boxes. (default is 5) |
| autoFocus | Boolean | | When true, the first input box will automatically be selected on page load. (default false) |
| handleOutputString | Function | ✓ | Implement it to handle the string output of the module. |
| inputProps | Object or Array\inputRegExp | RegExp | | Tells the component which characters to allow as inputs. (default is /^[0-9]$/ which is only numbers) |
| password` | Boolean | | Masks in the input if set as true (default is false) |