Obtenha alertas atraentes e consistentes em seu site React com esta biblioteca.
Alertas são mensagens exibidas em um site/aplicativo da web para transmitir informações importantes a um usuário. Eles desempenham um papel crucial em aplicativos da web. Existem muitas maneiras de criar alertas no React; Chakra UI torna o processo fácil e eficiente.
Chakra UI é uma biblioteca de componentes popular para React que fornece um conjunto de componentes de UI personalizáveis e acessíveis.
Instalando a IU do Chakra
Para usar a biblioteca Chakra UI, uma das muitas bibliotecas de componentes react, você primeiro precisa instalá-lo. Você pode instalá-lo executando o seguinte comando de terminal no diretório do projeto node.js:
npm i @chakra-ui/react @emotion/react @emotion/estilo framer-motion
Como alternativa, você pode instalar o Chakra UI usando o Yarn. Para fazer isso, execute o seguinte comando:
fio adicionar @chakra-ui/react @emotion/react @emotion/estilo framer-motion
Configurando a IU do Chakra
Depois de instalar o Chakra UI, você deve disponibilizá-lo em seu aplicativo. Para fazer isso, você precisa configurar o ChakraProvider componente.
O ChakraProvider é um componente de nível superior fornecido pela biblioteca Chakra UI. Ele envolve todo o aplicativo e fornece o tema e o contexto de estilo para todos os seus componentes.
Para configurar o ChakraProvider componente, importe-o de @chakra-ui/reagir:
importar Reagir de'reagir'
importar ReactDOM de'react-dom/client'
importar Aplicativo de'./Aplicativo'
importar { ChakraProvider } de'@chakra-ui/reagir'
ReactDOM.createRoot(documento.getElementById('raiz') como HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
O ChakraProvider componente suporta um tema suporte. passando o tema suporte para o ChakraProvider O componente garante que todos os componentes da IU do Chakra no aplicativo possam acessar o tema fornecido e o contexto de estilo. O tema prop é opcional; se você não passar, o Chakra UI usará um tema padrão.
Criando um alerta personalizado usando componentes de alerta
Chakra UI oferece quatro componentes que permitem criar um alerta personalizado: Alerta, AlertIcon, AlertTitle, e Descrição do Alerta.
Para criar sua mensagem de alerta, importe esses componentes da biblioteca Chakra UI e use-os da seguinte maneira:
importar Reagir de'reagir';
importar {Alerta, AlertIcon, AlertDescription, AlertTitle} de'@chakra-ui/reagir'funçãoAplicativo() {
retornar ('sucesso'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
</div>
)
}
exportarpadrão Aplicativo
Depois de importar os componentes, o Alerta componente exibe uma mensagem para o usuário. tem um status prop definido como “sucesso”, o que indica que a mensagem é uma mensagem de sucesso.
Existem três outros status: “info”, “erro” e “aviso”. O esquema de cores e o ícone usados pelo alerta dependerão do status da mensagem.
O Alerta componente contém três filhos: AlertIcon, AlertTitle, e Descrição do Alerta. O AlertIcon componente exibe um pequeno ícone ao lado da mensagem, AlertTitle exibe a mensagem principal e Descrição do Alerta exibe uma descrição mais detalhada da mensagem.
O bloco de código anterior gerará um alerta semelhante a este:
Personalizando mensagens de alerta usando a propriedade Variant
Para personalizar a aparência da mensagem de alerta, use o variante adereço do Alerta componente. O variante prop define a aparência visual da mensagem de alerta e determina o esquema de cores, o ícone e o peso da fonte da mensagem com base no valor que você passa para ela.
O variante prop aceita vários valores de string, como sutil, sólido, sotaque esquerdo, sotaque superior, acento direito, e acento inferior. Cada valor representa um estilo visual diferente da mensagem de alerta.
Aqui está um exemplo de quatro componentes de alerta com diferentes variantes:
importar Reagir de'reagir';
importar {Alerta, AlertIcon, AlertDescription, AlertTitle, Flex} de'@chakra-ui/reagir'funçãoAplicativo() {
retornar ('Centro' lacuna ='3' direção ='coluna' mt='4'> 'sucesso' variante='sólido'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
'sucesso' variante='sutil'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
'sucesso' variante='acento superior'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
'sucesso' variante='acento esquerdo'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
</Flex>
</div>
)
}
exportarpadrão Aplicativo
A renderização do bloco de código acima exibirá um alerta personalizado como este:
Personalizando suas mensagens de alerta usando o prop className
Em vez de manter a aparência padrão das mensagens de alerta, você pode personalizá-la usando o nome da classe suporte. Você usa o nome da classe prop para definir uma classe CSS e aplicar seu estilo personalizado à mensagem de alerta.
Por exemplo:
importar Reagir de'reagir';
importar {Alerta, AlertIcon, AlertDescription, AlertTitle} de'@chakra-ui/reagir'funçãoAplicativo() {
retornar ('sucesso' className='alerta'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription>
</Alert>
</div>
)
}
exportarpadrão Aplicativo;
Neste exemplo, o componente de alerta tem uma classe CSS “alerta”. Depois de definir a classe CSS, você pode definir seus estilos em seu arquivo CSS.
Igual a:
.alerta {
cor vermelha;
família da fonte: cursiva;
exibição: flexível;
flex-direction: coluna;
brecha: 0.4rem;
}
O código acima aplicará os estilos CSS ao componente de alerta. Se você estiver familiarizado com os adereços de estilo Chakra UI, você deve usá-los para estilizar mensagens de alerta em vez do nome da classe suporte.
Depois de aplicar os estilos CSS acima, o componente de alerta será exibido conforme a imagem abaixo:
Acionando mensagens de alerta em resposta a eventos do usuário
Você criou um componente de alerta que exibe consistentemente uma mensagem de alerta na tela. No entanto, para aprimorar a experiência do usuário, você pode acionar a mensagem de alerta em resposta a eventos específicos iniciados por um usuário, usando ouvintes de evento JavaScript. Esses eventos podem incluir clicar em um botão, enviar um formulário ou encontrar um erro.
Para acionar sua mensagem de alerta em resposta a eventos, use o estado React e o mostrar prop dos componentes da IU do Chakra.
Por exemplo:
importar Reagir de'reagir';
importar {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} de'@chakra-ui/reagir'funçãoAplicativo() {
const [display, setDisplay] = React.useState('nenhum');funçãonotificar() {
setDisplay('flexível');
}funçãofechar() {
setDisplay('nenhum');
}retornar (
"aplicativo">'sucesso' exibição={exibição} variante='sólido'> Bem vindo!!!</AlertTitle> Que bom ter você aqui </AlertDescription> 'absoluto' topo ='6px' direita ='6px' onClick={fechar}/>
</Alert>
exportarpadrão Aplicativo
Este bloco de código gerencia o estado da exibição de notificação com o useState gancho. Ele define o estado inicial da exibição de notificação como “nenhum”, o que oculta a notificação.
Quando o usuário clica no Botão, chama o notificar função. Chamar a função de notificação altera o valor do mostrar estado de “none” para “flex.”, tornando a notificação visível.
Quando o usuário clica no botão fechar, ele chama a função close. Ele altera o estado da exibição de volta para "nenhum", o que oculta a notificação.
Agora você pode criar alertas personalizáveis
Agora você aprendeu como criar um alerta personalizado em seu aplicativo React usando Chakra UI. Com o Chakra UI, criar alertas personalizados no React é fácil e intuitivo, permitindo fornecer informações claras e concisas aos nossos usuários. A IU do Chakra fornece muitos outros componentes de IU personalizáveis e acessíveis para ajudá-lo a criar excelentes aplicativos React.
