Organize seus formulários com esta combinação de bibliotecas funcionais e de design.

Material UI (MUI) é uma biblioteca de componentes popular que implementa o sistema Material Design do Google. Ele fornece uma ampla variedade de componentes de UI pré-construídos que você pode usar para criar interfaces funcionais e visualmente atraentes.

Mesmo sendo projetado para React, você pode estender seus recursos para outras estruturas dentro do ecossistema do React, como Next.js.

Primeiros passos com o formulário React Hook e a interface do material

Formulário de gancho de reação é uma biblioteca popular que fornece uma maneira simples e declarativa de criar, gerenciar e validar formulários.

Ao integrar UIs de materiais Componentes e estilos de UI, você pode criar formulários bonitos e fáceis de usar e aplicar um design consistente ao seu aplicativo Next.js.

Para começar, crie um scaffold de um projeto Next.js localmente. Para os fins deste guia, instale o versão mais recente do Next.js que faz uso do diretório App.

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

A seguir, instale estes pacotes em seu projeto:

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

Aqui está uma prévia do que você construirá:

Você pode encontrar o código deste projeto neste GitHub repositório.

Criação e estilo de formulários

React Hook Form fornece uma variedade de funções utilitárias, incluindo o usarFormulário gancho.

Este gancho agiliza o processo de tratamento do estado do formulário, validação de entrada e envio, simplificando os aspectos fundamentais do gerenciamento de formulários.

Para criar um formulário que utilize esse gancho, adicione o seguinte código a um novo arquivo, src/componentes/form.js.

Primeiro, adicione as importações necessárias para os pacotes React Hook Form e 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 fornece uma coleção de componentes de UI prontos para uso que você pode personalizar ainda mais passando acessórios de estilo.

No entanto, se quiser mais flexibilidade e controle sobre o design da IU, você pode optar por usar o método styled para estilizar seus elementos da IU com propriedades CSS. Nesse caso, você pode definir o estilo dos principais componentes do formulário: o contêiner principal, o próprio formulário e os campos de texto de entrada.

Logo abaixo das importações, adicione 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%',
});

Manter uma base de código modular é importante no desenvolvimento. Por esse motivo, em vez de agrupar todo o código em um único arquivo, você deve definir e definir o estilo dos componentes personalizados em arquivos separados.

Dessa forma, você pode importar e usar facilmente esses componentes em diferentes partes do seu aplicativo, tornando seu código mais organizado e de fácil manutenção.

Agora, defina o 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>
 </>
 );
}

Por fim, importe este componente em seu app/página.js arquivo. Exclua todo o código Next.js padrão e atualize-o com o seguinte:

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



 </main>
 )
}

Inicie o servidor de desenvolvimento e você verá um formulário básico com dois campos de entrada e um botão de envio em seu navegador.

Lidando com validação de formulário

O formulário parece ótimo, mas ainda não faz nada. Para torná-lo funcional, você precisa adicionar algum código de validação. usarFormulário funções do utilitário hook serão úteis ao gerenciar e validando as entradas do usuário.

Primeiro, defina a seguinte variável de estado para gerenciar o status atual do formulário, dependendo se um usuário forneceu as credenciais corretas. Adicione este código dentro do componente funcional:

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

Em seguida, crie uma função manipuladora para validar as credenciais. Esta função simulará uma solicitação de API HTTP que normalmente ocorre quando os aplicativos cliente interagem com uma API de autenticação de back-end.

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

Adicione uma função de manipulador de eventos onClick ao componente do botão – passando-o como um suporte – para acionar a função onSubmit quando um usuário clicar no botão enviar.

onClick={handleSubmit(onSubmit)}

O valor do formulárioStatus A variável state é importante porque determinará como você fornecerá feedback ao usuário. Se o usuário inserir as credenciais corretas, você poderá mostrar uma mensagem de sucesso. Se você tivesse outras páginas em seu aplicativo Next.js, poderia redirecioná-las para uma página diferente.

Você também deve fornecer feedback apropriado se as credenciais estiverem erradas. O Material UI oferece um ótimo componente de feedback que você pode usar junto Técnica de renderização condicional do React para informar o usuário, com base no valor de formStatus.

Para fazer isso, adicione o seguinte código logo abaixo do Formulário estilizado etiqueta de abertura.

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

Agora, para capturar e validar a entrada do usuário, você pode usar o registro função para registrar os campos de entrada do formulário, rastrear seus valores e especificar as regras de validação.

Esta função recebe vários argumentos, incluindo o nome do campo de entrada e um objeto de parâmetros de validação. Este objeto especifica as regras de validação para o campo de entrada, como o padrão específico e o comprimento mínimo.

Vá em frente e inclua o seguinte código como suporte no nome de usuário StyledTextField 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'
 },
})}

Agora, adicione o seguinte objeto como um adereço no senhaStyledTextField componente.

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

Adicione o código a seguir abaixo do campo de entrada do nome de usuário para fornecer feedback visual sobre os requisitos de entrada.

Este código irá disparar um alerta com uma mensagem de erro para informar o usuário sobre os requisitos, para garantir que ele corrija quaisquer erros antes de enviar o formulário.

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

Por fim, inclua um código semelhante logo abaixo do campo de texto de entrada da senha:

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

Incrível! Com essas mudanças, você deve ter um formulário funcional e visualmente atraente feito com React Hook Form e Material UI.

Aprimore seu desenvolvimento Next.js com bibliotecas do lado do cliente

Material UI e React Hook Form são apenas dois exemplos das muitas bibliotecas excelentes do lado do cliente que você pode usar para acelerar o desenvolvimento de front-end do Next.js.

As bibliotecas do lado do cliente fornecem uma variedade de recursos prontos para produção e componentes pré-construídos que podem ajudá-lo a construir melhores aplicativos front-end com mais rapidez e eficiência.