input

React Individual Character Input Boxes

Jul 14, 2020
React Individual Character Input Boxes

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

View Demo View Github

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:

PropTypeRequiredDescription
amountNumbersets the number of input boxes. (default is 5)
autoFocusBooleanWhen true, the first input box will automatically be selected on page load. (default false)
handleOutputStringFunctionImplement it to handle the string output of the module.
inputRegExpRegExpTells the component which characters to allow as inputs. (default is /^[0-9]$/ which is only numbers)
passwordBooleanMasks 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!

TODO

  • Highlight selected?
  • Allow paste (onPaste) with any input selected
  • Fix mobile and IE bugs.

GitHub

Recommended