0.0.2 • Published 3 years ago
react-otpjs v0.0.2
react-otpjs
A react-otpjs is a simple fully customizable react OTP field component.
Demo
| Codesandbox Demo | Interactive Demo |
|---|
Installation
To install the latest stable version:
Using yarn
yarn add react-otpjsUsing npm
npm i react-otpjsBasic Usage
import React, { useState } from 'react';
import { OTPInput } from "react-otpjs";
const App = () => {
const [value, setValue] = useState('');
return (
<OTPInput
value={value}
onChange={(otp)=>setValue(otp)}
numInputs={4}
/>
);
};
API
| Name | Type | Required | Default |
|---|---|---|---|
| numOfInputs | number | true | |
| fieldWidth | string | false | 50px |
| fieldHeight | sring | false | 50px |
| placeHolder | string | false | * |
| fieldSeperator | ReactNode | false | - |
| filedClassName | string | false | |
| containerClassName | string | false | |
| autoFocus | boolean | false | false |
| disabled | boolean | false | false |
| isError | boolean | false | false |
| isTypeNumber | boolean | false | true |
| errorStyle | Object | false | Visit Documentation` |
| inpuStyle | Object | false | Visit Documentation` |
| inputFocusStyle | Object | false | Visit Documentation` |
| onChange | Function | true | Visit Documentation` |