¿Cómo crear una lista de verificación de contraseñas en ReactJS?

En este artículo, vamos a aprender cómo podemos agregar una lista de verificación de contraseñas en ReactJS. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para agregar nuestra lista de verificación, usaremos el paquete react-password-checklist. El paquete react-password-checklist nos ayuda a integrar la lista de verificación de contraseñas en nuestra aplicación. Primero, instalaremos el paquete react-password-checklist y luego agregaremos una lista de verificación en nuestra página de inicio.

Crear aplicación ReactJS: puede crear un nuevo proyecto ReactJS usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-password-checklist usando el siguiente comando:

npm i react-password-checklist

Estructura del proyecto: se verá así

Agregar la lista de verificación de contraseñas: después de instalar el paquete, podemos agregar fácilmente una lista de verificación en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una lista de verificación a nuestra página de inicio.

Agregue el siguiente contenido en el archivo App.js :

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"
  
export default function PasswordGfg(){
  const [password, setPassword] = useState("")
    const [passwordAgain, setPasswordAgain] = useState("")
    return (
        <form>
      <h3>ReactJs Password Checklist</h3>
            <label>Password:</label>
            <input type="password" 
                   onChange={e => setPassword(e.target.value)}>
            </input>
            <label>Password Again:</label>
            <input type="password" 
                   onChange={e => setPasswordAgain(e.target.value)}>
            </input>
  
            <PasswordChecklist
                rules={["minLength","specialChar",
                        "number","capital","match"]}
                minLength={5}
                value={password}
                valueAgain={passwordAgain}
            />
        </form>
    )
};

Explicación: En el ejemplo anterior primero, estamos importando el componente PasswordChecklist y luego, estamos usando el componente instalado en una nueva función para agregar nuestra lista de verificación. También estamos usando useState hook para almacenar el valor de la contraseña.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: