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.

View Demo View Github

Install

npm install --save digitinputs-react
Bash

Usage

Pass a function with single paramater to onDigitsChange props to get values. Digits lenght depends on how many Digit component passed as child. You can switch between text & password inputs by using hidden switch prop.

import React, { Component } from 'react'

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

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>
    )
  }
}
React JSX

And you can pass custom className to override default styles on DigitInputs & Digit components

function Example() {
  return (
    <DigitInputs className="custom-digitinputs">
      <Digit className="digit-one" />
      ...
    </DigitInputs>
  )
}
React JSX

GitHub

yyalim/digitinputs-react

??

— Read More

Download as zip