0.2.0 • Published 5 years ago
react-verification-pin v0.2.0
Installation
Install via NPM:
npm install react-verification-pinUsage
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 |