Creando un campo de entrada OTP con React Input-OPT (Paso a Paso)

 En el mundo de las aplicaciones web, la seguridad es primordial. Los códigos OTP (One-Time Password) son una capa adicional de protección utilizada comúnmente para la verificación en dos pasos. En este post, te guiaremos paso a paso sobre cómo crear un campo de entrada OTP usando React Input-OPT, una biblioteca liviana y personalizable.

¿Qué es React Input-OPT?

React Input-OPT es una biblioteca de código abierto que facilita la creación de campos de entrada OTP en tus aplicaciones React. Proporciona una solución simple y eficiente para manejar la entrada de códigos de un solo uso, mejorando la experiencia del usuario y la seguridad de tu aplicación.

Ventajas de usar React Input-OPT

• Facilidad de uso: La biblioteca ofrece una API intuitiva para configurar y personalizar el campo de entrada OTP.
• Personalización: Puedes ajustar la apariencia del campo (estilo, separadores) para que coincida con el diseño de tu aplicación.
• Manejo automático del foco: React Input-OPT se encarga de enfocar automáticamente el siguiente campo de entrada a medida que el usuario escribe, brindando una experiencia fluida.
• Validación: Puedes implementar validación básica para asegurarte de que el usuario ingrese la cantidad correcta de dígitos.
• Ligero: La biblioteca tiene un tamaño reducido, lo que mantiene el rendimiento de tu aplicación.

Empezando con React Input-OPT

Para comenzar, necesitas tener un proyecto React configurado. Si aún no lo tienes, puedes crear uno rápidamente usando Create React App:

Bash

npx create-react-app my-otp-app

Una vez creado el proyecto, navega a su directorio e instala React Input-OPT:

Bash

cd my-otp-app
npm install react-otp-input

Creando el componente OTPInput

Ahora, vamos a crear un componente React reutilizable para el campo de entrada OTP. Crea un nuevo archivo llamado OtpInput.jsx dentro de la carpeta src/components (o una carpeta similar para componentes personalizados en tu proyecto).

JavaScript

import React, { useState, useRef } from 'react';
import Input from 'react-otp-input';

const OtpInput = ({ numInputs = 6, onOtpChange }) => {
  const [otp, setOtp] = useState('');
  const otpRef = useRef(null);

  const handleChange = (value) => {
    setOtp(value);
    onOtpChange(value); // Dispara la función callback del padre
  };

  const handleFocus = (index) => {
    if (otpRef.current) {
      otpRef.current[index].focus();
    }
  };

  return (
    <Input
      value={otp}
      onChange={handleChange}
      numInputs={numInputs}
      ref={otpRef}
      onKeyDown={(event) => {
        if (event.key === 'Backspace' && otp.length === 0) {
          // Manejar borrado en el primer campo
        } else if (event.key === 'Enter' && otp.length === numInputs) {
          // Manejar envío del código completo (opcional)
        }
      }}
      // Puedes agregar otras props para personalizar la apariencia
    />
  );
};

export default OtpInput;

Explicación del código:

1. Importamos los componentes necesarios de React y React Input-OPT.
2. Creamos el componente funcional OtpInput que recibe dos props:
   • numInputs: Define el número de dígitos del código OTP (por defecto 6).
   • onOtpChange: Una función callback que se ejecuta cuando cambia el valor del OTP.
3. Utilizamos useState para manejar el estado del código OTP (otp).
4. Creamos una referencia mutable (otpRef) usando useRef para acceder a los elementos de entrada individuales más adelante.
5. La función handleChange actualiza el estado otp y dispara la función callback del padre (onOtpChange) cuando el usuario ingresa un dígito.
6. La función handleFocus se encarga de enfocar el siguiente campo de entrada automáticamente a medida que el usuario escribe.
7. El componente Input de React Input-OPT se renderiza con las props necesarias:
   • value: El valor actual del código OTP.
   • onChange: La función handleChange para manejar los cambios.
   • numInputs: El número de campos de entrada.
   • ref: La referencia otpRef para acceder a los elementos de entrada.