React - Usando Hooks & Context API para Criar Componentes Globais

A maioria dos aplicativos que são desenvolvidos necessitam de alguns componentes que precisam ser chamados/usados a todo momento, como, por exemplo, Modals, Spinners, Alerts entre vários outros. Alguns desenvolvedores preferem colocar esses componentes em um contêiner / página / tela em questão e criar um estado para controlar esses componentes e sim, sei que existe uma solução para cada categoria de problema e que eles podem tomar rumos diferentes.

Porém, hoje venho trazer um modo de implementar esses componentes utilizando Context API de forma que seja possível exibir ou não tal componente, passar propriedades e eventos.

No final, devemos ter algo parecido com a imagem abaixo e sim, um modal com estilo simples já que o propósito aqui não é o estilo :p

Então sem mais enrolação, bora ao que interessa.

1 - Projeto Base

Suponho que você já tenha um projeto inicializado então não vou entrar em muitos detalhes em como iniciar um projeto React.

Estou utilizando o template Typescript no meu exemplo, mas você não precisa usa-lo se não quiser.

2 - Criando o Context e o corpo do Modal

Primeiro, vamos definir as propriedades do modal, aqueles que vão ser utilizados no nosso componente:

Arquivo: contexts/Modal.tsx

Agora, vamos definir também as propriedades do contexto, os mesmos que serão passados como valor para os componentes filhos. Vou também criar o valor default para inicializar nosso context e depois, exportar de forma default o ModalContext:

Bom, neste ponto já temos a definição de propriedades do nosso Context (ContextProps) e do componente Modal (ModalProps) propriamente dito. Já temos também o ModalContext sendo exportado.

Você vai perceber que temos duas linhas que disparam erro, são elas as linhas 8 e 11. Esses disparos de erros são necessárias dado que, caso o desenvolvedor esqueça de usar o Provider (que vamos implementar mais adiante), os métodos vão estar indefinidos, portanto, os erros serão disparados.

Continuando, vamos agora criar o componente ModalProvider que vai fazer o uso do ModalContext.Provider e passar os valores necessários para os componentes filhos. Vou deixar alguns comentários no código para um melhor entendimento:

Tudo certo até aqui. Neste ponto já temos um Modal básico que pode ser usado em toda nossa aplicação utilizando o hook useContext passando nosso contexto para obter seus valores, algo como:

const { showModal, hideModal } = useContext(ModalContext)

Porém, como o intuito aqui é não repetir código, vamos criar também nossa custom hook.

3 - Criando a custom hook useModal

Esta é uma etapa bem simples, vamos apenas criar uma custom hook que retorna as propriedades do nosso ContextModal.

Arquivo: hooks/useModal.ts

Agora, basta que apenas usemos o useModal() para obter os métodos necessários do nosso Modal. O exemplo de uso desta hook você verá na etapa 5.

4 - Provendo o Modal para a Aplicação

Para este artigo, vou usar o arquivo index.tsx do projeto React, mas você pode usar qualquer componente em qualquer nível de acordo com sua necessidade, como o arquivo App.tsx, por exemplo, mas já que estamos implementando um Modal, faz sentido que ele esteja no topo dos componentes aninhados.

Arquivo: ./index.tsx

5 - Usando a custom hook useModal

Agora que o Modal está sendo provido no nível mais alto dos componentes, logo, seus métodos e propriedades também estão acessíveis em qualquer nível abaixo. Vou utilizar o App.tsx para usar nosso hook, mas lembre-se, você pode usar esta custom hook em qualquer componente como tela Home, Profile, etc.

Arquivo: ./App.tsx

E Voilà!!! Temos um Modal funcionando de forma global que pode ser usado por qualquer componente ou mesmo custom hook de acordo com a necessidade. Basicamente é isso pessoal.

Esse método funciona tanto para ReactJS quanto para React Native.

Vocês podem ver esse Modal funcionando ao vivo através do CodeSandbox.

Como disse anteriormente, esse método pode ser usado para criar várias soluções para sua aplicação. Eu espero que tenha ajudado de alguma forma e deixem um feedback.

Valeu!!!