react-individual-character-input-boxes2 v1.0.9
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:
Demo
You can view a demo of this component here!
Installation
$ npm i --save react-individual-character-input-boxes
How To Use
Import:
import RICIBs from 'react-individual-character-input-boxes';Example code:
handleOutput (string) {
// Do something with the string
}
render () {
return (
<div>
<RICIBs
amount={5}
handleOutputString={this.handleOutput}
inputRegExp={/^[0-9]$/}
password
/>
</div>
)
}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. |
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) |
Help, I cant get it to work or I want a feature!
Please feel free to submit an issue if you are running into trouble or have an idea for additional functionality!
BUG
I am aware that there is a bug (mostly seems to occur in Chrome) where if you type to quickly sometimes the selection will spazz out and jump between inputs. I think it is a browser bug, but if anybody has any idea how to possibly fix this let me know please!
TODO
- Fix possible android and iphone bugs
- Allow paste (onPaste) with any input selected
License
MIT © Danny Radden