react-read-otp

Do you know? you can auto read OTP in your mobile browser as well.

follow 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.

Installing

npm i react-read-otp

Import

import { useReadOTP } from "react-read-otp";

$3

``ts
function App() {
const [otp, setOTP] = useState("");
useReadOTP(setOTP);
return (



);
}
`

$3

`ts
function App() {
const [otp, setOTP] = useState("");
const stop = useReadOTP(setOTP);
return (



);
}
`

$3

`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.)