react-verification-pin
Installation
Install via NPM:
npm install react-verification-pin
Usage
TypeScript
import { VerificationPin, StatusType } from "react-verification-pin";
export const YourComponent: React.FC = () => {
const [status, setStatus] = useState<StatusType>("process");
const handleOnFinish = (code: string) => {
setStatus("wait");
// simulating a search on your api
if (code === "111111") {
setTimeout(() => {
setStatus("error");
}, 3000);
} else {
setTimeout(() => {
setStatus("success");
}, 3000);
}
};
return (
<VerificationPin
type="number"
inputsNumber={6}
status={status}
title="Your title here"
subTitle="Your subtitle here"
onFinish={handleOnFinish}
/>
);
};
PropTypes
Key | Type | Description |
---|---|---|
type | number |
number , text , numberAndText
|
inputsNumber | number |
The count of characters |
status | StatusType |
process , wait , error , success
|
title | string |
Title |
subTitle | string |
Sub Title |
onChange | Function |
Trigger on input change |
onFinish | Function |
Trigger on all character inputs |