Custom Number (Pin Code) Input Component – digitinputs-react

A digit/number/pin code input component that is useful to get SMS codes from user on two-factor authentications and in many other scenarios when you need to get a numerical input from user digit by digit.

Install & Import:

# NPM
$ npm i digitinputs-react --save

import React, { Component } from 'react'
import { DigitInputs, Digit } from 'digitinputs-react'
import 'digitinputs-react/dist/index.css'

Basic Usage:

class Example extends Component {
  handleDigitsChange(value) {
    value.asNumber // -> 123
    value.asString // -> '123'
    value.asObject //-> { '0': '1', '1': '2', '2': '3'}
  }
  render() {
    return (
      <form>
        <DigitInputs hidden onDigitsChange={this.handleDigitsChange}>
          <Digit />
          <Digit />
          <Digit />
        </DigitInputs>
      </form>
    )
  }
}

Preview:

Download Details:

Author: yyalim

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/yyalim/digitinputs-react

License: MIT