@a7medhassan/react-otp v0.1.2
react-otp
react-otp
is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features using typescript and react.
it can also work with next js without any problem
Installation
You can install react-otp
via npm or yarn:
npm install @a7medhassan/react-otp
yarn add @a7medhassan/react-otp
Usage
To use react-otp in your React application, import the Otp component and customize it with props as needed:
import React from 'react';
import Otp from '@a7medhassan/react-otp';
const MyOtpComponent = () => {
const handleSubmit = () => {
// Handle OTP submission
};
const handleReset = () => {
// Handle OTP reset
};
return (
<Otp
onSubmit={handleSubmit}
onReset={handleReset}
numberOfInputs={6}
isDisabled={false}
shouldAutoFocus={true}
// Add other props as needed
/>
);
};
export default MyOtpComponent;
Props
react-otp provides the following props for customization:
onSubmit
: Function called when the OTP is submitted.// this function accept 1 argument as object //* values: values of inputs as string ex:"1233" //* valuesAsArray: values of inputs as array ex:["1","2","3","4"] //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] //* reset: function that handle reset of all inputs or one of theme //ex 1 : reset() ==>> this will reset all inputs //ex 2 : reset({index:1,value:""}) ==>> this will reset certain input with its index
const MyOtpComponent = () => { const btnRef = useRef(null); return <> <Otp onSubmit={({values,valuesAsArray,reset,inputRefs}) => {}} submitBtnRef={btnRef} // must be exist to be work
/> reset </> }
* `onReset`: Function called when the OTP is reset.
```jsx
//* reset: function that handle reset of all inputs or one of theme
//ex 1 : reset() ==>> this will reset all inputs
//ex 2 : reset({index:1,value:""}) ==>> this will reset certain input with its index
import React from 'react';
import Otp from 'react-otp';
const MyOtpComponent = () => {
const resetRef = useRef<HTMLButtonElement>(null);
const handleSubmit = () => {
// Handle OTP submission
};
const handleReset = ({reset}) => {
// Handle OTP reset
reset()
};
return (
<>
<Otp
onReset={handleReset}
ResetBtnRef={resetRef} // must be exist to be work
// Add other props as needed
/>
<button ref={resetRef}>reset</button>
<>
);
};
export default MyOtpComponent;
numberOfInputs
: Number of input fields for the OTP (default: 1).
<Otp
numberOfInputs={4} // number of inputs
/>
isDisabled
: Disables the OTP input fields (default: false).
<Otp
isDisabled={true} // to disable the inputs
/>
shouldAutoFocus
: Automatically focuses on the first input field (default: true).
<Otp
shouldAutoFocus={false} // by default when reload the page first input be focus automatic if you want to disable this behavior
/>
renderSeparator
: Custom separator to render between input fields.
<Otp
renderSeparator={<>*</>}
</>
placeHolder
: Function to generate placeholders for input fields.
// placeHolder is a function that accept input number(index +1) and return string that display in placeholder input
//ex: in input number one this function will look like this (1)=>"" you can return the number of input or any thing you want
<Otp
placeHolder={(inputNumber)=>""}
</>
ContainerClassName
: CSS class name for the container element.
<Otp
ContainerClassName="test"
</>
inputClassName
: CSS class name for the input fields.
<Otp
inputClassName="test"
</>
onChange
: Function called when the OTP value changes.// this function accept 1 argument as object //* values: values of inputs as string ex:"1233" //* valuesAsArray: values of inputs as array ex:["1","2","3","4"] //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] <Otp onChange={({values,valuesAsArray,inputRefs}) => {}} />
submitBtnRef
: Ref for the submit button.ResetBtnRef
: Ref for the reset button.submitAutomaticAfterInputsFilled
: Function to automatically submit OTP after all inputs are filled.
// this function accept 1 argument as object
//* values: values of inputs as string ex:"1233"
//* valuesAsArray: values of inputs as array ex:["1","2","3","4"]
//* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref]
//* reset: function that handle reset of all inputs or one of theme
//ex 1 : reset() ==>> this will reset all inputs
//ex 2 : reset({index:1,value:""}) ==>> this will reset certain input with its index
<Otp
submitAutomaticAfterInputsFilled={({values,valuesAsArray,reset,inputRefs}) => {}}
/>
onKeyDown
: Function called when a key is pressed in an input field.
// this function accept 1 argument as object
//* index:index of input ex:1
//* key: value of input ex:"5"
//* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref]
<Otp
onKeyDown={({index,inputRefs,key}) => {}}
/>
onKeyUp
: Function called when a key is released in an input field.
// this function accept 1 argument as object
//* values: values of inputs as string ex:"1233"
//* valuesAsArray: values of inputs as array ex:["1","2","3","4"]
//* index:index of input ex:1
//* key: value of input ex:"5"
//* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref]
<Otp
onKeyUp={({index,inputRefs,key,values,valuesAsArray})=>{ }}
/>
onFocus
: Function called when an input field gains focus.
// this function accept 1 argument as object
//* values: values of inputs as string ex:"1233"
//* valuesAsArray: values of inputs as array ex:["1","2","3","4"]
//* index:index of input ex:1
//* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref]
<Otp
onFocus={({index,inputRefs,values,valuesAsArray})=>{
}}
/>
onBlur
: Function called when an input field loses focus.
// this function accept 1 argument as object
//* values: values of inputs as string ex:"1233"
//* valuesAsArray: values of inputs as array ex:["1","2","3","4"]
//* index:index of input ex:1
//* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref]
<Otp
onBlur={({index,inputRefs,values,valuesAsArray})=>{}}
/>
passwordType
: change the type of input to password (default=false).<Otp passwordType={true} />
License This project is licensed under the MIT License.