react-input-code

React component to insert a code in a series of single char input elements

Install

npm install --save react-input-code

Usage

import React, { useState } from 'react'
import ReactInputCode from 'react-input-code'
import 'react-input-code/dist/index.css'

const App = () => {
  const [value, setValue] = useState('')

  return <>
    <ReactInputCode
      value={value}
      onChange={setValue}
      type="text"
      className="my-input-code"
      itemClassName="my-code-item"
      nItems={6}
      autoFocus={true} />

    <p>Current value: {value}</p>
  </>
}

Props

• nItems - number of items composing che html input code component
• value - control the current value
• onChange - subscribe to change events
• type - type attribute of each html input element ('text', 'number', 'password', etc...)
• className - additional class applied to the component container
• itemClassName - additional class applied to each element
• autoFocus - (optional) if set to true the first elemnt will be focused on component load

Controlled Props

You can control the value / onChange props (specify the current value of the control) by providing values for them.

License

MIT © [Mario Fornaroli](https://github.com/Mario Fornaroli)