utkutekalmaz / digitinputs-react

A react component for digit inputs

digitinputs-react

A react component for digit inputs. It might be very useful to get SMS codes from user on two factor authentications and in many other scenarios when you need get an numerical input from user digit by digit.

Visit homepage to see how it is working.

Install

npm install --save digitinputs-react

Usage

import React, { Component } from 'react'

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

class Example extends Component {
  // ...

  handeDigitsChange(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>
    )
  }
}

License

MIT © yyalim