How can I customize the OTP input in React?

How can I customize the OTP input in React?

You can customize the OTP input in React by using libraries like 'react-otp-input' or 'react-otp-input-field'. What specific customization do you have in mind?

I want to change the styles and add a focus effect.

You can achieve that by overriding the default styles using CSS. For example, you can use the 'style' prop to apply custom styles directly.

Can you show me an example of how to do that?

Sure! Here's a simple example:

import OtpInput from 'react-otp-input';

const CustomOtpInput = () => {
  return (
    <OtpInput
      value={otp}
      onChange={setOtp}
      numInputs={6}
      separator={<span>-</span>}
      inputStyle={{
        width: '3rem',
        height: '3rem',
        margin: '0 1rem',
        fontSize: '24px',
        border: '2px solid #ccc',
        borderRadius: '4px',
        outline: 'none',
        transition: 'border-color 0.3s',
      }}
      focusStyle={{ borderColor: '#4CAF50' }}
    />
  );
};

This will give you a customized OTP input with a focus effect.