react-digit-input
React hook to handle inputs with separated boxes for each digit.
![NPM version](https://img.shields.io/npm/v/react-digit-input?style=for-the-badge)
Installation
npm install react-digit-input --save
Usage
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import useDigitInput from 'react-digit-input';
function App() {
const [value, onChange] = React.useState('');
const digits = useDigitInput({
acceptedCharacters: /^[0-9]$/,
length: 6,
value,
onChange,
});
return (
<div>
<div className="input-group">
<input inputMode="decimal" autoFocus {...digits[0]} />
<input inputMode="decimal" {...digits[1]} />
<input inputMode="decimal" {...digits[2]} />
<span className="hyphen" />
<input inputMode="decimal" {...digits[3]} />
<input inputMode="decimal" {...digits[4]} />
<input inputMode="decimal" {...digits[5]} />
</div>
<pre>
<code>"{value}"</code>
</pre>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
License
MIT