react-input-code
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

react-input-code

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

demo_image

NPM JavaScript Style Guide

Install

npm install --save react-input-code

Usage

1 . Require react-input-code after installation

import ReactInputCode from 'react-input-code';

2 . Add style css from module

import 'react-input-code/dist/index.css'

3 . Include react-input-code as in the following example

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} 
      placeholder={'-'}
      disabled={true}/>
}

Props

  • nItems - number of items composing che html input code component
  • value - control the current value
  • onChange - subscribe to change events
  • type - (optional) type attribute of each html input element ('text', 'number', 'password', etc...). Default value is 'text'
  • className - (optional) additional class applied to the component container
  • itemClassName - (optional) additional class applied to each element
  • autoFocus - (optional) if set to true the first elemnt will be focused on component load
  • placeholder - (optional) placeholder, the same char introduced in each element. If more than one char is present, only the first char will be considered
  • disabled - (optional) controls field disabled prop

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)

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.10
    7
    • latest

Version History

Package Sidebar

Install

npm i react-input-code

Weekly Downloads

8

Version

1.0.10

License

MIT

Unpacked Size

32.1 kB

Total Files

12

Last publish

Collaborators

  • mario.fornaroli.dev