Técnicas avançadas no Chakra UI

Chakra UI é o melhor amigo do desenvolvedor da web. Uma biblioteca baseada em componentes formada por blocos de construção básicos que você pode usar para construir aplicativos da web, Chakra UI ajuda a “construir aplicativos React acessíveis com velocidade”.

Os componentes da IU do Chakra são acessíveis e compatíveis com WAI-ARIA, e sua API torna componentes de personalização e temas fácil. Mas isso nem arranha a superfície dos benefícios que oferece aos desenvolvedores.

Nosso foco neste artigo é examinar algumas das coisas legais que podemos fazer com a IU do Chakra que vão além do básico, e como eles podem aumentar nossa produtividade como desenvolvedores. Eu preparei uma demonstração das coisas que veremos. Aqui estão os links para a artigo de demonstração e o repositório GitHub se desejar acompanhar.

Este artigo foi escrito com Next.js. As implementações da IU do Chakra são semelhantes em todo o ecossistema React, no entanto, haverá algumas diferenças quando se trata de conceitos como roteamento, que apontarei quando chegarmos a eles no tutorial.

Criação dinâmica SVGs

Ao criar diferentes temas para o seu site, você pode querer alterar dinamicamente os SVGs para se ajustarem ao tema atual. Isso significa criar versões diferentes de cada SVG para cada tema.

Embora isso tecnicamente funcione, a IU do Chakra fornece um método mais limpo. Podemos usar o gancho useColorMode da IU do Chakra para alterar programaticamente o preenchimento de nossos SVGs e torná-los dinâmicos.

Antes de usarmos useColorMode, precisamos implementar o modo escuro. Este guia pode ajudar se você não usou o modo escuro com Chakra UI já.

Uma vez que o modo escuro foi configurado, podemos usar useColorMode:

import {LightBulb, Moon, Sun, Vercel} from”../svgs”; import {Box, Button, Center, Stack, useColorMode} de”@ chakra-ui/react”; função padrão de exportação SVG () {const {colorMode, toggleColorMode}=useColorMode (); return (

No trecho de código acima, importamos o gancho useColorMode e os SVGs que queremos tornar dinâmicos. Podemos acessar colorMode e toggleColorMode em useColorMode. colorMode é o modo de cor atual e toggleColorMode é a função para alternar o modo de cor.

Passamos a função toggleColorMode para o manipulador de eventos onClick do botão e colorMode para os componentes SVG:

function lightBulb ( {colorMode}) {return (

Para estender ou substituir um token no tema padrão, importamos a função extendTheme e adicionamos as teclas que deseja substituir. Vamos ver como estender o objeto do tema.

Para começar, criamos um arquivo Theme.js e, em seguida, criamos as definições de estilo para nosso aplicativo lá:

import {extendTheme} de”@ chakra-ui/react”; const th emes={cores: {marca: {100:”# ff0000″, 80:”# ff1a1a”,},},}; const theme=extendTheme (substitui); exportar tema padrão;

Estendemos as cores adicionando duas novas (as cores da nossa marca) no objeto do tema. Também podemos definir tokens de estilo para fontes, pontos de interrupção, tamanhos de fonte, alturas de linha e muito mais, dependendo dos requisitos de design do aplicativo.

Para usar este novo objeto de tema com os estilos estendidos adicionados, vamos para o raiz de nosso aplicativo, onde configuramos ChakraProvider:

import {ChakraProvider} de”@ chakra-ui/react”; importar tema de”tema”; importar Nav de”Nav”; function MyApp ({Component, pageProps, router}) {return (