react-verify-otp
Description: react-verify-otp a fully customizable, one-time password input component for the web built with React.
Demo
Installation
To install the latest stable version:
npm install react-verify-otp
yarn add react-verify-otp
pnpm install react-verify-otp
Basic Use
import { useState, useRef } from 'react';
import OtpInput from 'react-verify-otp';
import '/node_modules/react-verify-otp/dist/style.css';
const App = () => {
const otpRef = useRef(null);
const [otp, setOtp] = useState('');
const handleChangeOtp = (otp) => {
setOtp(otp)
};
// use "otpRef?.current?.[method_name];"
// example: otpRef?.current?.clearOtp();
// used to call some methods defined in this library
return (
<OtpInput
ref={otpRef}
otpValue={otp}
onChange={handleChangeOtp}
separator={'♦'}
/>
);
};
export default App
API
| Name | Type | Required | Default | Description |
|---|
| otpValue | string | true | '' | The value of the OTP. |
| onChange | function | true | - | Method change OTP code. |
| numberInputs | number | false | 4 | Number of OTP inputs to be rendered. |
| placeholder | string | false | '' | Suggest value of each input. The length of this string should be equal to numberInputs.
|
| separator | any | false | null | Provide a custom separator between inputs by passing a component, string, number or symbols etc.
For example:
<>♦</>,
<span>♦</span>
etc.
|
| autoFocus | boolean | false | false | Autofocus input on initial page load. |
| isDisabled | boolean | false | false | Disables all the inputs. |
| isError | boolean | false | false | Indicates there is an error in the inputs. |
| isInputNumber | boolean | false | false | Only numbers enter. |
| isInputSecure | boolean | false | false | Masks input characters. |
| styleOtpWrapper | string | false | none | Style passed to container of inputs. |
| styleOtpInput | string | false | none | Style passed to each input. |
Use ref
| Name | Type | Required | Default | Description |
|---|
| ref | any | false | null | Used to access available methods. |
| clearOtp | function | - | - | Clear the value OTP present. |
| getInputOtpRef | function | - | - | Access to each inputs. |
| getOtpValue | function | - | - | Get the value of the OTP. |
Changelog
v1:
- v1.0.0 - The first, create and build project push to github, fix deploy to vercel, publish to npm package management.
- v1.1.0 - Add description to package.json, show info to npm package management (keywords, author, license, homepage, repository).
- v1.1.1 - Fix error import package when use reality (but do not success :(().
- v1.1.2 - I'm trying fix error import package when use reality.
- v1.1.3 - It has been successfully fixed.
- v1.2.3 - Update typings fix warning & import css file (but fail).
- v1.3.3 - I'm trying import css dynamic, however, I added a temporary guide in this description.
