# react-digit-input

> Higher Order Component for pass code/separated digit input.

Latest version **2.1.0** (published 2020-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-digit-input
pnpm add react-digit-input
yarn add react-digit-input
bun add react-digit-input
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-07-22 |
| First published | 2017-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Forbes Lindesay |
| Maintainers | forbeslindesay, react-digit-input-bot |

## Links

- npm: https://www.npmjs.com/package/react-digit-input
- Repository: https://github.com/ForbesLindesay/react-digit-input
- Homepage: https://github.com/ForbesLindesay/react-digit-input#readme
- Issues: https://github.com/ForbesLindesay/react-digit-input/issues
- npm.io page: https://npm.io/package/react-digit-input

## Recent versions

- 2.1.0 (latest) — 2020-07-22
- 2.0.0 — 2020-07-22
- 1.1.0 — 2018-01-04
- 1.0.1 — 2018-01-03
- 1.0.0 — 2017-10-30

## README

# react-digit-input

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

 - [Live Demo](https://react-digit-input.forbeslindesay.co.uk/)
 - Demo source: [html](demo/index.html), [TypeScript](src/demo/client.tsx)

[![Build Status](https://img.shields.io/github/workflow/status/ForbesLindesay/react-digit-input/Test/master?style=for-the-badge)](https://github.com/ForbesLindesay/react-digit-input/actions?query=workflow%3ATest+branch%3Amaster)
[![Rolling Versions](https://img.shields.io/badge/Rolling%20Versions-Enabled-brightgreen?style=for-the-badge)](https://rollingversions.com/ForbesLindesay/react-digit-input)
[![NPM version](https://img.shields.io/npm/v/react-digit-input?style=for-the-badge)](https://www.npmjs.com/package/react-digit-input)

## Installation

```
npm install react-digit-input --save
```

## Usage

```js
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

---
_Source: https://npm.io/package/react-digit-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._