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 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 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>
)
}
}
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.9k Jan 3, 2023
28 Jun 6, 2019
9 Sep 5, 2022
15 Nov 9, 2022
1 Sep 22, 2021
26 Jun 17, 2022
303 Dec 22, 2022
8.2k Jan 2, 2023
130 Dec 21, 2022
1.3k Dec 13, 2022
2.1k Dec 30, 2022
721 Nov 30, 2022
287 Dec 18, 2022
357 Dec 30, 2022
26 Nov 16, 2022
402 Dec 30, 2022
37 Jun 17, 2022
180 Dec 26, 2022
837 Dec 21, 2022