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 (
autoFocus
handleOutputString={this.handleOutput}
inputProps={[
{ className: "first-box" },
{ style: { "color": "orange" } },
{ placeholder: "_" }
]}
inputRegExp={/^[0-9]$/}
/>
)
}
`
Props:| Prop | Type | Required | Description |
| :--- | :--- | :---: | :--- |
|
| 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\ | | Allows you to pass through properties to the input boxes. With this you can customize attributes (including styles) for all of the boxes by using an Object. To customize each box individually use an array of objects where each item in the array represents a box. |
| 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) |