Crear un formulario de registro utilizando Formik ...

A continuación encontrarás un ejemplo de un formulario de registro que utiliza Formik y Yup para la validación, Tailwind CSS para el diseño y NextUI para los componentes de entrada y botones. Además, se incluye un archivo README que explica cómo integrar este formulario en otros proyectos.

---

Código del formulario (RegistrationForm.jsx o RegistrationForm.tsx)

jsx
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

// Importar componentes de NextUI
import { Input, Button } from '@nextui-org/react';

// Esquema de validación con Yup
const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('El nombre es requerido.'),
  email: Yup.string()
    .email('El email no es válido.')
    .required('El email es requerido.'),
  password: Yup.string()
    .min(6, 'La contraseña debe tener al menos 6 caracteres.')
    .required('La contraseña es requerida.'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Las contraseñas no coinciden.')
    .required('La confirmación de contraseña es requerida.')
});

const RegistrationForm = () => {
  // useFormik es el hook principal de Formik
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      password: '',
      confirmPassword: ''
    },
    validationSchema,
    onSubmit: (values) => {
      // Aquí puedes manejar el envío de datos
      // Por ejemplo, enviar a tu API o mostrar un mensaje de éxito
      console.log('Valores del formulario:', values);
      alert('¡Formulario enviado exitosamente!');
    }
  });

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="bg-white shadow-md rounded-md p-6 max-w-md w-full">
        <h1 className="text-2xl font-bold text-center mb-6">
          Formulario de Registro
        </h1>

        <form onSubmit={formik.handleSubmit} className="flex flex-col gap-4">
          {/* Campo Nombre */}
          <div>
            <Input
              bordered
              labelPlaceholder="Nombre"
              clearable
              fullWidth
              name="name"
              value={formik.values.name}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              status={
                formik.touched.name && formik.errors.name ? 'error' : 'default'
              }
            />
            {formik.touched.name && formik.errors.name && (
              <p className="text-red-500 text-xs mt-1">
                {formik.errors.name}
              </p>
            )}
          </div>

          {/* Campo Email */}
          <div>
            <Input
              bordered
              labelPlaceholder="Correo electrónico"
              clearable
              fullWidth
              name="email"
              type="email"
              value={formik.values.email}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              status={
                formik.touched.email && formik.errors.email ? 'error' : 'default'
              }
            />
            {formik.touched.email && formik.errors.email && (
              <p className="text-red-500 text-xs mt-1">
                {formik.errors.email}
              </p>
            )}
          </div>

          {/* Campo Contraseña */}
          <div>
            <Input
              bordered
              labelPlaceholder="Contraseña"
              clearable
              fullWidth
              name="password"
              type="password"
              value={formik.values.password}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              status={
                formik.touched.password && formik.errors.password
                  ? 'error'
                  : 'default'
              }
            />
            {formik.touched.password && formik.errors.password && (
              <p className="text-red-500 text-xs mt-1">
                {formik.errors.password}
              </p>
            )}
          </div>

          {/* Campo Confirmar Contraseña */}
          <div>
            <Input
              bordered
              labelPlaceholder="Confirmar Contraseña"
              clearable
              fullWidth
              name="confirmPassword"
              type="password"
              value={formik.values.confirmPassword}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              status={
                formik.touched.confirmPassword && formik.errors.confirmPassword
                  ? 'error'
                  : 'default'
              }
            />
            {formik.touched.confirmPassword && formik.errors.confirmPassword && (
              <p className="text-red-500 text-xs mt-1">
                {formik.errors.confirmPassword}
              </p>
            )}
          </div>

          {/* Botón de envío */}
          <Button
            type="submit"
            shadow
            color="primary"
            auto
          >
            Registrarse
          </Button>
        </form>
      </div>
    </div>
  );
};

export default RegistrationForm;

Notas de Tailwind

• Se asume que tu proyecto ya está configurado con Tailwind CSS.
• Las clases utilizadas (bg-gray-100, bg-white, flex, shadow-md, rounded-md, etc.) son clases nativas de Tailwind.
• Asegúrate de que tu archivo tailwind.config.js tenga configurada la ruta donde se aloja este componente para que Tailwind procese las clases.

Notas de NextUI

• El ejemplo utiliza componentes básicos (Input y Button) importados desde @nextui-org/react.
• Asegúrate de tener instaladas las dependencias de NextUI en tu proyecto (@nextui-org/react).

---

README

Descripción

Este es un ejemplo de formulario de registro con validación, creado con Formik y Yup. El formulario utiliza componentes de NextUI para los campos de entrada y botones, mientras que el estilo de la interfaz corre a cargo de Tailwind CSS.

Requisitos previos

1. Node.js (versión 14 o superior, recomendado 16+).
2. Un proyecto con React (puede ser con Next.js u otro boilerplate de React).
3. Tailwind CSS configurado correctamente (opcional, aunque recomendado para el estilo utilizado).
4. Dependencias necesarias:
   • Formik: npm install formik
   • Yup: npm install yup
   • NextUI: npm install @nextui-org/react
   • Tailwind (si no lo tienes configurado): sigue la guía oficial de instalación o la del framework que uses.

Instalación

1. Clonar o copiar el archivo RegistrationForm.jsx (o .tsx si usas TypeScript) en tu proyecto.
2. Instalar dependencias (si aún no las tienes):

   bash
   npm install formik yup @nextui-org/react

   (Si usas Yarn: yarn add formik yup @nextui-org/react)
3. Verificar configuración de Tailwind en tu proyecto:
   • En tu tailwind.config.js, asegúrate de incluir las rutas de tus componentes, por ejemplo:

     js
     module.exports = {
       content: [
         './src/**/*.{js,jsx,ts,tsx}',
         './components/**/*.{js,jsx,ts,tsx}',
         // otros archivos o directorios que usen tailwind...
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     };

4. Importar y usar el formulario en tu aplicación:

   jsx
   import React from 'react';
   import RegistrationForm from './components/RegistrationForm';
   
   function App() {
     return (
       <div>
         <RegistrationForm />
       </div>
     );
   }
   
   export default App;

Cómo personalizar el formulario

• Puedes modificar el esquema de validación en validationSchema si necesitas más campos o reglas distintas.
• Cambiar las clases de Tailwind para adaptar el estilo a tu gusto.
• Reemplazar o añadir propiedades a los componentes de NextUI (por ejemplo, usar otros colores, variantes, etc.).
• Dentro de onSubmit, reemplaza la lógica de console.log o el alert por el flujo que necesites (llamada a una API, actualización de estado global, etc.).

Contribuciones

• Si deseas mejorar este formulario (agregar campos adicionales, cambiar la estructura, etc.), puedes crear tu propia rama o copiar el código y ajustarlo a tus necesidades.
• Asegúrate de mantener la consistencia en los estilos y la lógica de validación de Formik/Yup.

Licencia

Este código es de uso libre. Puedes adaptarlo y utilizarlo en tus proyectos personales o profesionales sin restricciones. Se agradecen menciones o referencias al autor original, pero no son obligatorias.

---

Con esto ya deberías poder integrar este formulario de registro en tu proyecto, personalizarlo y extenderlo según tus necesidades. ¡Éxito en tu desarrollo!