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. 🤙🏾🤙🏾

Acho válido você dar uma olhada no exemplo bem simples que deixei online para visualização final dos componentes (clicando aqui).

Se ficar curioso, confere lá o código com as implementações no Github (vale dar uma atenção para a implementação da responsividade) (esse é o link :) ).