drlappies/react-digit-input

Higher Order Component for passcode/separated digit input.

react-digit-input

React hook to handle inputs with separated boxes for each digit.

• Live Demo
• Demo source: html, TypeScript

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