Storybook demo

Try it youself at Chromatic

Installation

npm i react-code-verification-input

Usage

Use it as a controlled component, by suplying it with value and onChange value callback.

import React, { useState } from 'react'
import { CodeInput } from 'react-code-verification-input'

const [code, setCode] = useState('')

<CodeInput
  length={6}
  onChange={(value) => {
    setCode(value)
  }}
  value={code}
/>

Component props

Name	Type	Optional	Description
length	number	No	Lenght of the input.
value	Text	No	Value of input.
onChange	Text	No	Callback running after value is changed.
cellClass	Text	Yes	CSS class to override custom cell styling.
containerClass	Text	Yes	CSS class to override custom container styling.