Como dividir os componentes do Chakra UI para que fiquem organizados?

Nesse artigo, iremos entender como funciona o básico de reutilizar componentes do Chakra UI. Espero que goste!

Podemos perceber que em inputs, por exemplo, eles recebem várias propriedades no Chakra, sejam de tipos ou estilização. Se em um componente houver vários inputs, isso iria poluir bastante o nosso HTML. Portanto, o ideal é ir quebrando os componentes. Exemplo:

<Stack spacing="4">
          <FormControl>
            <FormLabel htmlFor="email">E-mail</FormLabel>

            <Input
              id="email"
              name="email"
              type="email"
              focusBorderColor="pink.500"
              bgColor="gray.900"
              variant="filled"
              _hover={{
                bgColor: 'gray.900'
              }}
              size="lg"
            />
          </FormControl>

          <FormControl>
            <FormLabel htmlFor="password">Senha</FormLabel>
            <Input
              id="password"
              name="password"
              type="password"
              focusBorderColor="pink.500"
              bgColor="gray.900"
              variant="filled"
              _hover={{
                bgColor: 'gray.900'
              }}
              size="lg"
            />
          </FormControl>
        </Stack>

No código acima, há dois inputs: um de e-mail e outro de senha. Esses inputs estão recebendo várias propriedades e provavelmente, você teria que repetir a mesma coisa se usar mais inputs no mesmo componente ou em outros.

Como evitar isso? Você pode criar uma pasta chamada Form e nela, colocar inputs, selects, etc, em componentes separados. Então você pode criar um componente do Chakra, que pode ser reutilizado em várias partes da aplicação. Seguindo o exemplo acima, irei criar um componente Input dentro de Form:

import { FormControl, FormLabel, Input as ChakraInput, InputProps as ChakraInputProps } from "@chakra-ui/react";

interface InputProps extends ChakraInputProps {
    name: string;
    label?: string;
}

export function Input({ name, label, ...rest }: InputProps) {
    return (
        <FormControl>
            {!!label && <FormLabel htmlFor={name}>{label}</FormLabel>}

            <ChakraInput
                id={name}
                name={name}
                focusBorderColor="pink.500"
                bgColor="gray.900"
                variant="filled"
                _hover={{
                    bgColor: 'gray.900'
                }}
                size="lg"
                {...rest}
            />
        </FormControl>

    )
}

Vamos analisar o que está acontecendo neste componente: estamos importando os componentes do Chakra, renomeando Input para ChakraInput porque “Input” é o mesmo nome do componente. Além disso, criei uma interface para tipar o nome e a label.

Na função, estou desestruturando o name e a label, reutilizando-os em ChakraInput. Assim, em qualquer parte da aplicação, eu posso trocar o id e name de um componente Input, para o que eu quiser, sem repetir as mesmas propriedades do código acima. Além disso, também estou fazendo uma verificação para mostrar o label apenas se houver.

Mas o que o …rest está fazendo? Para usar o rest, importei InputProps do Chakra, no qual ele recebe todos os types possíveis de um input dentro do Chakra. Isso significa que em qualquer parte da aplicação, eu posso mudar o type para o que eu quiser, como text, password, e-mail, etc.

Agora podemos importar o componente Input em qualquer parte da aplicação e reutilizar o Input, ficando assim:

           <Input
            name="email"
            type="email"
            label="Email"
          />

          <Input
            name="password"
            type="password"
            label="Senha"
          />

A diferença é enorme, não é? Espero que você tenha entendido como funciona dividir os componentes para serem reutilizados, usando o Chakra UI!