1.1.3 • Published 3 years ago

digitinputs-react v1.1.3

Weekly downloads
5
License
MIT
Repository
github
Last release
3 years ago

digitinputs-react

NPM JavaScript Style Guide

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 examples.

Install

npm install --save digitinputs-react

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 & 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>
    )
  }
}

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

License

MIT © yyalim

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago