react_typescript_6_digit_otp_input_jamsrui_quickstart.ts

1import React, { useState } from 'react';
2import { OtpInput } from '@jamsrui/otp-input';
3
4const App: React.FC = () => {
5  const [otp, setOtp] = useState<string>('');
6
7  const handleChange = (value: string) => {
8    setOtp(value);
9    console.log("Current OTP:", value);
10  };
11
12  const handleComplete = (value: string) => {
13    console.log("Completed OTP:", value);
14  };
15
16  return (
17    <div style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
18      <OtpInput
19        value={otp}
20        onChange={handleChange}
21        onComplete={handleComplete}
22        otpLength={6}
23        focusColor="#007bff"
24      />
25    </div>
26  );
27};
28
29export default App;