Checklist do Context

README.md

Checklist do Context

• Antes de começar

  • Pense em quais informações você pretende compartilhar no Context
  • Pense quais componentes vão precisar acessar e/ou modificar essas informações.

• Criar arquivos na pasta src/context:

  • Arquivo src/context/example-context.ts.
  • Arquivo src/context/example-provider.tsx.

• No arquivo src/context/example-context.ts:

  • Importar o createContext do React.

  • Criar a tipagem inicial do valor do contexto.

  • Criar e exportar objeto do context.

    Exemplo:

    import { createContext } from 'react';
    
    type ExampleContextValue = {
      name: string;
      changeName: (newName: string) => void;
    };
    
    const ExampleContext = createContext({} as ExampleContextValue);
    
    export default ExampleContext;

• No arquivo src/context/example-provider.ts:

  • Importar o contexto criado.

  • Criar a tipagem de props do provider com chldren.

  • Criar objeto que será o valor do contexto.

  • Envolver objeto em um useMemo.

  • Retornar Provider com children e value.

    Exemplo:

    import React, { useMemo, useState } from 'react';
    import ExampleContext from './example-context';
    
    type ExampleProviderProps = {
      children: React.ReactNode
    };
    
    function ExampleProvider({ children }: ExampleProviderProps) {
      const [name, setName] = useState('');
    
      const changeName = (newName: string) => {
        setName(newName);
      };
    
      const contextValue = useMemo(() => ({
        name,
        changeName,
      }), [name]);
    
      return (
        <ExampleContext.Provider value={ contextValue }>
          {children}
        </ExampleContext.Provider>
      );
    }
    
    export default ExampleProvider;

  • Agora passos finais para utilizar o contexto:

    • No arquivo src/main.tsx adicionar o provider.

    // Importar o Provider do seu contexto
    import ExampleProvider from './context/example-provider.tsx';
    
    ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
      <BrowserRouter>
        <ExampleProvider>
          <App />
        </ExampleProvider>
      </BrowserRouter>,
    );

    • Nos componentes, acessar os valores utilizando o hook useContext.

      // Nos imports
      import ExampleContext from '../context/example-context';  

        // Dentro do código do componente:
        const { name, changeName } = useContext(ExampleContext);