react-otp-input-z/README.md

React hook otp input, copy paste, etc... (Lib)

<div align="center">
    <h1>react-otp-input-z</h1>
    <a href="https://github.com/delpikye-v/react-otp-input">react-otp-input-z</a>
    <br />
    <br />
    <b><a href="https://codesandbox.io/s/vi64xp">LIVE EXAMPLE</a></b>
</div>

---

#### Description

+ Simple react otp input.
+ Support copy paste

---
### Usage

Install the package

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

Import the module in the place you want to use:
```js
import "react-otp-input-z/build/styles.css";
import ReactOtp from "react-otp-input-z";
```

#### Snippet
```js
    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 <b>index.d.ts</b>


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


<br />

#### RUN

<b><a href="https://codesandbox.io/u/delpi.k">LIVE EXAMPLE</a></b>

<br />

##### version

2.0.0-np: 
+ change event: onCompleted and support onEnter
+ fix compare: otpSize and value
+ optimze

<br />

### License

MIT