Radix

A biblioteca Radix nos permite importar componentes com lógica pronta, como Modais ou Collapsibles, deixando a parte de layout e estilos para criarmos. Para cada componente que desejarmos usar, devemos adicionar o pacote ao nosso projeto e seguir a documentação da biblioteca.

Modais

Documentação oficial
Para a criação de modais, utilizamos o componente Dialog da biblioteca.

    yarn add @radix-ui/react-dialog

Seguindo a documentação oficial, devemos montar uma grande estrutura. Disponibilizamos, porém, esta estrutura pronta nos projetos, nos preocupando apenas com o conteúdo do modal.

Estrutura padrão

Estrutura completa

// Importando todos os componentes de Dialog
import * as Dialog from '@radix-ui/react-dialog';

function Modal() {
    return (
        <Dialog.Root>
            <Dialog.Trigger />
            <Dialog.Portal>
                // Overlay para deixar o fundo com blur
                <Dialog.Overlay />
                //Todo o conteúdo do modal
                <Dialog.Content>
                    // Título do modal
                    <Dialog.Title />
                    // Descrição do modal
                    <Dialog.Description />
                    // Componente para fechamento do modal
                    <Dialog.Close />
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    )
}

Criação

Para criarmos um modal, devemos criar um novo componente com alguns componentes prontos:

modal-teste/index.tsx

import { DialogClose, DialogIconButton, DialogSeparator, DialogTitle, DialogDescription } from '../modal';
 
export function ModalTeste( /*Props que precisar*/ props) {
    // Podem ser criados quaisquer estados, variáveis, ou utilizar qualquer hook

    return (
        <>
            /*
            DialogClose é o componente que envolve qualquer item que terá como 
            função fechar o modal. Neste caso, é passado um ícone de "X" com borda.
            asChild define que DialogClose será representado como a tag que for
            passada dentro.
            */
            <DialogClose asChild>
                <DialogIconButton>
                    <IoCloseSharp />
                </DialogIconButton>
            </DialogClose>
            /*
            Título do modal, que ficará em destaque.
            */
            <Title>Modal Teste</Title>
            /*
            Separador de seção do modal.
            */
            <DialogSeparator />
            // ...
            // Todo o conteúdo desejado.
            // ...
            /*
            Outro DialogClose, que envolve um botão para fecharmos o modal.
            */
            <DialogClose asChild>
                <FullButton warning>Cancelar</FullButton>
            </DialogClose>
        </>
    )
}

Atenção!

Importe os componentes padrões do nosso componente modal, e não os da biblioteca.

Utilização

Utilizamos o componente ModalTrigger e passamos a ele o modal que desejamos abrir:

pagina/index.tsx

    function Pagina() {
        ...
        <ModalTrigger 
            // Propriedade que define se o modal será fechado caso clique fora.
            // Não é necessário passar quando for desejado.
            isClosableOutside={true}
            // Passamos na propriedade "component" o modal que será aberto ao clicar 
            // no conteúdo de dentro.
            component={<ModalTeste />}
        >
            // Conteúdo que será visto pelo usuário e terá a função de abrir o modal
            <FullButton success>Abrir modal</FullButton>
        </ModalTrigger>
        <ModalTrigger isOverlay={false} component={<ModalTeste />}>
            <LargeButton success>Modal sem overlay</LargeButton>
        </ModalTrigger>
        ...
    }

Resultado:

Collapsible

Documentação oficial
Para a criação de collapsibles (seções que expandem/retraem), utilizamos o componente Collapsible da biblioteca.

    yarn add @radix-ui/react-collapsible

Seguindo a documentação oficial, devemos montar uma estrutura. Disponibilizamos, porém, esta estrutura pronta nos projetos, nos preocupando apenas com o conteúdo do collapsible.

Estrutura padrão

Estrutura completa

import * as Collapsible from '@radix-ui/react-collapsible';

function Collapsible() {
    <Collapsible.Root>
        // Componente responsável por expandir/retrair ao clicar
        <Collapsible.Trigger />
        // Conteúdo
        <Collapsible.Content />
    </Collapsible.Root>
}

Criação

Para criarmos um Collapsible, criamos um componente e utilizamos alguns componentes prontos:

collapsible-exemplo/index.tsx

import { CollapsibleContent } from "{components}/collapsible";

function CollapsibleExemplo(/* Props necessários */ props) {
    return(
        // Container customizado
        <CollapsibleContent>
            //Conteúdo
            <p>Collapsible text</p>
        </CollapsibleContent>
    )
}

Utilização

Para utilizarmos o collapsible, o passamos como propriedade do componente CollapsibleTrigger:

pagina-exemplo/index.tsx

import { CollapsibleTrigger } from "{components}/collapsible";
import { CollapsibleExemplo } from "..."

function PaginaExemplo() {
    // ...
    // Elemento que terá função de abrir/fechar o collapsible
    <CollapsibleTrigger component={<CollapsibleExemplo />}>
        // Visual
        <FilterButton />
    </CollapsibleTrigger>
    // ...
}

Resultado:

Clique para abrir/fechar: