react-individual-character-input-boxes2

Simple single character input boxes.

Usage no npm install needed!

<script type="module">
  import reactIndividualCharacterInputBoxes2 from 'https://cdn.skypack.dev/react-individual-character-input-boxes2';
</script>

README

react-individual-character-input-boxes

npm version Join the chat at https://gitter.im/single-character-input-boxes/Lobby

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

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