Chakra UI — Facilidade no front-end JavaScript
Já pensou em ter uma aplicação esteticamente agradável, fácil de manter e pouco verbosa, sem NEM UMA linha de CSS? Não parece real, mas é. Isso é o Chakra UI.
A ideia do Chakra é bem simples: em vez de você criar os componentes de interface, como Inputs, Menus, Buttons etc, esta biblioteca já entrega tudo pronto. Vou explicar a seguir.
A instalação do Chakra UI é bem fácil, apenas adicionando a biblioteca e suas dependências ao seu projeto com o comando a seguir:
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming
Após feito isso, para usar os componentes você deve apenas fazer a importação no topo do arquivo onde ele será usado, como no exemplo:
import { Image } from "@chakra-ui/core";
Para conhecer todos os componentes oferecidos pelo Chakra UI, acesse a documentação.
Além da facilidade, outra coisa oferecida por esta biblioteca é a flexibilidade. O Chakra oferece um tema padrão, onde os atributos como cores, tamanhos de tela (para responsividade), fontes etc são pré-definidos, mas a melhor parte disso é que você pode definir seu próprio tema, com as inforações que desejar. Segue o exemplo:
import {theme} from "@chakra-ui/core";
const breakpoints = ["360px", "768px", "1024px", "1440px"];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
const customTheme = {
...theme,
breakpoints,
colors: {
...theme.colors,
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac",
},
brandSecondary: {
900: "#fffafa",
800: "#f5fffb",
700: "#f8f8ff",
}
},
};
export default customTheme;
Para usar seu próprio tema é bem fácil, é só chamá-lo no componente raiz da sua aplicação, junto com o ThemeProvider do Chakra, que é responsável pela aplicação da biblioteca nos componentes, como mostra o trecho de código a seguir:
import customTheme from "../styles/themes";
import React from "react";
import {ThemeProvider } from "@chakra-ui/core";
function MyApp({Component, pageProps}) {
return (
<ThemeProvider theme={customTheme}>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
Caso deseje usar o tema padrão do Chakra, basta não definir a propriedade theme.
Eu, pessoalmente, achei a ideia do Chakra muito útil e fácil de usar. Espero que essa apresentação e o projeto de demonstração que vou deixar abaixo desperte sua curiosidade para uso dessa biblioteca que pode economizar muito tempo e trabalho no desenvolvimento da sua aplicação React. Se você gostou, tem uma observação ou até uma crítica, deixe aí nos comentários.
Obrigado pela leitura, até a próxima e bons estudos. 🤙🏾🤙🏾