Description

• Simple react otp input.
• Support copy paste

Usage

Install the package

npm install --save react-otp-input-z

Import the module in the place you want to use:

import "react-otp-input-z/build/styles.css";
import ReactOtp from "react-otp-input-z";

Snippet

    const [value, setValue] = React.useState("5555");
    const [isDone, setDone] = React.useState(false);

    <ReactOtp
      {/* secret */}
      {/*
      otpSize={6}
      // display 5 5 5 5 ''
      */}
      otpSize={5}
      value={value}
      onCompleted={function (value, isDone): void {
        setValue(value)
        setDone(isDone)
      }}
    />

    {/* isDone: boolean add event when isDone*/}
    <button>Check otp</button>

props

see index.d.ts

| props | type | description | | ----------------- | ----------------------------------------------------------------------- | ----------- | | className? | string | | | otpClassName? | string | | | type?: | number / text | | | secret? | boolean (false) | | | disabled? | boolean (false) | | | readonly? | boolean (false) | | | useUpDownArrow? | boolean (false) | | | selectionOnFocus? | boolean (true) | | | value? | string / string[] | | | enablePaste? | boolean (true) // allow copy paste | | | autoPasteFull? | boolean (true) => paste full when copytext.length === otpSize (any box) | | | splitIcon? | React.ReactNode / String | | | otpSize? | number (default 4) | | | autoFocus? | boolean (true) | | | onCompleted? | Function (value: string, isDone: boolean) => void | | | onEnter? | Function (value: string, isDone: boolean) => void | |

RUN

LIVE EXAMPLE

version

2.0.0-np:

• change event: onCompleted and support onEnter
• fix compare: otpSize and value
• optimze

License

MIT