0.2.0 • Published 3 years ago
react-verification-pin v0.2.0
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 |