Vamos começar criando nossos arquivos dentro da pasta src
:
- Criar uma pasta
context
; - Dentro da pasta
context
vamos criar um arquivomyContext.js
;
Dentro do arquivo myContext.js
:
- Importar do react o
createContext
; - Criar uma variável
context
que vai receber o resultado docreateContext()
; - Exportar a nossa variável;
Exemplo:
import { createContext } from 'react';
const context = createContext();
export default context;
Lembrando que o Provider é um componente que vai conter nossos estados globais da aplicação, geralmente importamos ele no index.js
que é o ponto mais alto da hierarquia de componentes para prover nossos estados para todos os seus filhos.
- Dentro da pasta
context
vamos criar um arquivomyProvider.js
; - Vamos importar nosso
MyContext
nesse arquivo e criar o componenteProvider
; - Recebemos via props os
children
da árvore de componentes; - No retorno do Provider vamos chamar via tag o nosso
MyContext.Provider
que recebe umvalue
como prop; - Passamos dentro da tag os nossos
children
que serão alimentados pelovalue
do Provider;
OBS: A construção dos estados dentro do Provider depende do componente ser funcional ou de classe:
- Para classes utilizamos o
this.state
; - Para funções utilizamos hooks,
useState
;
// EXEMPLO COM COMPONENTE FUNCIONAL
import React, { useState } from 'react';
import MyContext from './myContext';
const INITIAL_STATE = { nome: 'Xablau', idade: 100 };
function Provider({ children }) {
const [state, setState] = useState(INITIAL_STATE);
return (
<MyContext.Provider value={ state }>
{children}
</MyContext.Provider>
)
}
export default Provider;
// EXEMPLO COM COMPONENTE CLASSE
import React, { useState } from 'react';
import MyContext from './myContext';
const INITIAL_STATE = { nome: 'Xablau', idade: 100 };
class Provider extends React.Component {
state = INITIAL_STATE;
render() {
const { children } = this.props;
return (
<MyContext.Provider value={ { ...this.state } }>
{children}
</MyContext.Provider>
)
}
}
export default Provider;
- Vamos importar o nosso componente
Provider
englobando nosso app;
import Provider from './context/myProvider'
<Provider>
<App />
</Provider>
Agora toda nossa aplicação está sendo alimentada pelos dados disponibilizados no value do nosso Provider. Por fim só precisamos resgatar esses dados em qualquer componente da nossa aplicação.
OBS: Para consumir os dados também vai depender do componente ser funcional ou classe:
- Para classes utilizamos o
MyContext.Consumer
ou podemos utilizar ocontextType
;
// EXEMPLO MyContext.Consumer
<MyContext.Consumer>
{(value) => { // recebe o value provido pelo Contexto
/* renderiza algo utilizando o valor recebido do contexto */
}}
</MyContext.Consumer>
// EXEMPLO contextType
import MyContext from './context/myContext';
const value = this.context // recebe o value provido pelo Contexto
MyComponent.contextType = MyContext; // Criar fora da classe
- Para funções utilizamos hooks,
useContext
;
// EXEMPLO COM HOOK useContext
import React, { useContext } from 'react';
import MyContext from './context/myContext';
const value = useContext(MyContext); // recebe o value provido pelo Contexto