Ordene sus formularios con esta combinación de bibliotecas funcionales y de diseño.

Material UI (MUI) es una biblioteca de componentes popular que implementa el sistema Material Design de Google. Proporciona una amplia gama de componentes de interfaz de usuario prediseñados que puede utilizar para crear interfaces funcionales y visualmente atractivas.

Aunque está diseñado para React, puedes ampliar sus capacidades a otros marcos dentro del ecosistema de React, como Next.js.

Comenzando con el formulario React Hook y la interfaz de usuario del material

Forma de gancho de reacción es una biblioteca popular que proporciona una forma sencilla y declarativa de crear, gestionar y validar formularios.

Al integrar UI de materiales Con componentes y estilos de interfaz de usuario, puede crear formularios atractivos que sean fáciles de usar y aplicar un diseño consistente a su aplicación Next.js.

Para comenzar, cree un proyecto Next.js localmente. Para los fines de esta guía, instale el última versión de Next.js que hace uso del directorio de aplicaciones.

instagram viewer 
npx create-next-app@latest next-project --app

A continuación, instale estos paquetes en su proyecto:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Aquí hay una vista previa de lo que creará:

Puedes encontrar el código de este proyecto en este GitHub repositorio.

Crear y diseñar formularios

React Hook Form proporciona una variedad de funciones de utilidad, incluida la utilizar formulario gancho.

Este gancho agiliza el proceso de manejo del estado del formulario, la validación de entradas y el envío, simplificando los aspectos fundamentales de la gestión de formularios.

Para crear un formulario que haga uso de este enlace, agregue el siguiente código a un nuevo archivo, src/components/form.js.

Primero, agregue las importaciones requeridas para los paquetes React Hook Form y MUI:

"use client"
import React, {useState} from'react';
import { useForm } from'react-hook-form';
import { TextField, Button as MuiButton, Alert } from'@mui/material';
import { styled } from'@mui/system';

MUI proporciona una colección de componentes de UI listos para usar que puedes personalizar aún más pasando accesorios de estilo.

No obstante, si desea más flexibilidad y control sobre el diseño de la interfaz de usuario, puede optar por utilizar el método de estilo para diseñar los elementos de la interfaz de usuario con propiedades CSS. En este caso, puede aplicar estilo a los componentes principales del formulario: el contenedor principal, el formulario en sí y los campos de entrada de texto.

Justo debajo de las importaciones, agregue este código:

const FormContainer = styled('div')({
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 height: '100vh',
});
const StyledForm = styled('form')({
 width: '80%',
 maxWidth: '400px',
 padding: '20px',
 borderRadius: '10px',
 border: '2px solid #1E3A8A',
 boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
 backgroundColor: '#ffffff',
 textAlign: 'center',
});
const StyledTextField = styled(TextField)({
 marginBottom: '16px',
 width: '100%',
});

Mantener una base de código modular es importante en el desarrollo. Por este motivo, en lugar de agrupar todo el código en un solo archivo, debe definir y diseñar componentes personalizados en archivos separados.

De esta manera, puede importar y utilizar fácilmente estos componentes en diferentes partes de su aplicación, lo que hace que su código sea más organizado y fácil de mantener.

Ahora, defina el componente funcional:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

Finalmente, importe este componente en su aplicación/página.js archivo. Elimine todo el código repetitivo de Next.js y actualícelo con lo siguiente:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

Inicie el servidor de desarrollo y debería ver un formulario básico con dos campos de entrada y un botón de envío en su navegador.

Manejo de validación de formularios

El formulario se ve muy bien, pero todavía no hace nada. Para que sea funcional, debe agregar algún código de validación. utilizar formulario Las funciones de utilidad de gancho serán útiles al administrar y validar las entradas del usuario.

Primero, defina la siguiente variable de estado para administrar el estado actual del formulario, dependiendo de si un usuario ha proporcionado las credenciales correctas. Agregue este código dentro del componente funcional:

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

A continuación, cree una función de controlador para validar las credenciales. Esta función simulará una solicitud de API HTTP que normalmente ocurre cuando las aplicaciones cliente interactúan con una API de autenticación de backend.

const onSubmit = (data) => {
if (data.username 'testuser' && data.password 'password123') {
 setFormStatus({ success: true, error: '' });
 } else {
 setFormStatus({ success: false, error: 'Invalid username or password' });
 }
};

Agregue una función de controlador de eventos onClick al componente del botón (pasándolo como un accesorio) para activar la función onSubmit cuando un usuario hace clic en el botón Enviar.

onClick={handleSubmit(onSubmit)}

El valor de la formularioEstado La variable de estado es importante porque determinará cómo proporcionará comentarios al usuario. Si el usuario ingresa las credenciales correctas, es posible que muestre un mensaje de éxito. Si tuviera otras páginas en su aplicación Next.js, podría redirigirlas a una página diferente.

También debe proporcionar comentarios adecuados si las credenciales son incorrectas. Material UI ofrece un excelente componente de retroalimentación que puedes usar junto con Técnica de renderizado condicional de React para informar al usuario, según el valor de formStatus.

Para hacer esto, agregue el siguiente código justo debajo del Formulario con estilo etiqueta de apertura.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"error">{formStatus.error}</Alert>
): null}

Ahora, para capturar y validar la entrada del usuario, puede utilizar el registro función para registrar los campos de entrada del formulario, realizar un seguimiento de sus valores y especificar las reglas de validación.

Esta función toma varios argumentos, incluido el nombre del campo de entrada y un objeto de parámetros de validación. Este objeto especifica las reglas de validación para el campo de entrada, como el patrón específico y la longitud mínima.

Continúe e incluya el siguiente código como accesorio en el nombre de usuario. Campo de texto con estilo componente.

{...register('username', {
 required: 'Username required',
 pattern: {
 value: /^[a-zA-Z0-9_.-]*$/,
 message: 'Invalid characters used'
 },
 minLength: {
 value: 6,
 message: 'Username must be at least 6 characters'
 },
})}

Ahora, agregue el siguiente objeto como accesorio en el contraseñaCampo de texto con estilo componente.

{...register('password', {
 required: 'Password required',
 minLength: {
 value: 8,
 message: 'Password must be at least 8 characters'
 },
})}

Agregue el siguiente código debajo del campo de entrada del nombre de usuario para proporcionar información visual sobre los requisitos de entrada.

Este código activará una alerta con un mensaje de error para informar al usuario de los requisitos y garantizar que corrija cualquier error antes de enviar el formulario.

{errors.username && <Alertseverity="error">{errors.username.message}Alert>}

Finalmente, incluya un código similar justo debajo del campo de texto de ingreso de contraseña:

{errors.password && <Alertseverity="error">{errors.password.message}Alert>}

¡Impresionante! Con estos cambios, debería tener un formulario funcional y visualmente atractivo creado con React Hook Form y Material UI.

Mejore su desarrollo Next.js con bibliotecas del lado del cliente

Material UI y React Hook Form son solo dos ejemplos de las excelentes bibliotecas del lado del cliente que puede utilizar para acelerar el desarrollo frontend de Next.js.

Las bibliotecas del lado del cliente proporcionan una variedad de funciones listas para producción y componentes prediseñados que pueden ayudarle a crear mejores aplicaciones de front-end de forma más rápida y eficiente.