Auto read otp hook
npm install react-read-otpfollow this link to know more.
https://web.dev/web-otp/
You have to call handful of functions to get it done. But no worries, if you are using react you can easily read by using hooks in just single line.
npm i react-read-otp
import { useReadOTP } from "react-read-otp";
``ts`
function App() {
const [otp, setOTP] = useState("");
useReadOTP(setOTP);
return (
OTP Screen
setOTP(e.target.value)} />
);
}
`ts`
function App() {
const [otp, setOTP] = useState("");
const stop = useReadOTP(setOTP);
return (
Welcome home
setOTP(e.target.value)} />
Auto read otp is enabled,
);
}
`ts
function App() {
const [enabled, setEnabled] = useState(false);
const [otp, setOTP] = useState("");
useReadOTP(setOTP, {
enabled,
});
const handleSendOtp = () => {
// do your api call
// enable otp listener
setEnabled(true);
};
return (
Reference
`ts
const reader = useReadOTP(callback, option);
`-
reader: () => void call this to cancel reading in any point of time.-
callback: (otp: string) => any a callback will be called by hooks if found otp.-
option: -
enabled: boolean either reading start or not, defaults to true
- timeout: number timeout milliseconds, defaults to 60000 (60 seconds)
- onError: (error: Error) => void` accepts a callback and will be called for network failures, API errors, timeouts etc.)