Formulario de registro creado con React y Tailwind.

Componente reutilizable para tus aplicaciones web

Copiar código

El día de hoy traemos un componente reutilizable y personalizable de un formulario en React.js. Este ya incluye validaciones básicas y manejo de eventos.

En cuanto a su funcionamiento e implementación, sigue las buenas prácticas que se recomiendan dentro de la misma documentación de React.js, así que puede usarse sin ningún problema en producción en cualquier proyecto.

En este caso el formulario fue creado únicamente con JavaScript nativo y los hooks que ofrece la librería de React.js, por lo que no será necesario descargar dependencias externas.

Instalación

Para poder utilizar este formulario en tus proyectos solo es necesario copiar y pegar el código en el fichero de tu preferencia.

Para que los estilos puedan visualizarse es necesario que tengas instalado y configurado en el proyecto Tailwind.

Código

⚙️ HTML/CSS

COPIAR

const ReactSignUpForm = () => {
    type ErrorTypes = {
        isRepeatPasswordNotEqual?: boolean
    }

    const [error, setError] = React.useState<ErrorTypes | null>(null)
    const handleSignUp = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()

        const formData = new FormData(e.target as HTMLFormElement)
        const payload = Object.fromEntries(formData.entries())

        //ALl the value
        console.log(payload)

        if (payload.password !== payload.repeatPassword) {
            setError({ isRepeatPasswordNotEqual: true })
            return
        }
    }

    return (
        <form className='px-2 max-w-xl mx-auto my-4' onSubmit={handleSignUp}>
            <div className="name">
                <label htmlFor="">Name</label>
                <input required type="text" id="name" name='name' className='border block' />
            </div>
            <div className="">
                <label htmlFor="surname">Surname</label>
                <input type="text" id='surname' name="surname" className='border block' />
            </div>
            <div className="">
                <label htmlFor="email">Email</label>
                <input required type="email" id='email' name='email' className='border block' />
            </div>
            <div className="">
                {error?.isRepeatPasswordNotEqual && <p className='text-red-500'>Password and Confirm Password don't match</p>}
                <label htmlFor="password">Password</label>
                <input required type="password" id="password" name="password" className='border block' placeholder='Min 8 Characters' />
            </div>
            <div className="">
                <label htmlFor="repeatPassword">Confirm password</label>
                <input required type="password" id="repeatPassword" name="repeatPassword" className='border block' />
            </div>
            <div>
                <input type="submit" value="Register" className='px-6 py-2 bg-rose-600 text-white' />
            </div>
        </form>
    )
}