UseContext

UseContext is a way for children elements to access parents' state or use function. 

 

You can create a context file (in this case it can be named ThemeContext.js that defines what function and state to provide to their children. The structure of the code is roughly:

import React, {useState} from 'react';

// define contexts - now you can use them as tags in return statement
const ThemeContext = React.createContext();
const ThemeUpdateContext = React.createContext(); 

export function ThemeProvider({
	// stuff to pass on
	const [darkTheme, setDarkTheme] = useState(false);
	const toggleTheme = ()=>setDarkTheme(!darkTheme);
    
	return (
		<ThemeContext.Provider value={darkTheme}>
        		<ThemeUpdateContext.Provider value={toggleTheme}
				{children}
			</ThemeUpdateContext.Provider>
        	</ThemeContext.Provider>
	);
}

The code above is doing the following in sequence:

- create context tags (ThemeContext, ThemeUpdateContext)

- set up stuffs that we want to pass (one's state (darkTheme) and one's a function)

- use the context tags but with .Provider, and value = {whatever we want to pass to children}

- embed children in the middle.

 

So now we can import this context and use it in our app... but we need to create a function in the context file. And it is done like this:

import React, {useState, useContext} from 'react';

// define contexts - now you can use them as tags in return statement
const ThemeContext = React.createContext();
const ThemeUpdateContext = React.createContext(); 

//create functions that children can hook into
function useTheme(){
	return useContext(ThemeContext); //takes the context and returns the embedded value
}

function useThemeUpdate(){
	return useContext(ThemeUpdateContext);
}

export function ThemeProvider({
	// stuff to pass on
	const [darkTheme, setDarkTheme] = useState(false);
	const toggleTheme = ()=>setDarkTheme(!darkTheme);
    
	return (
		<ThemeContext.Provider value={darkTheme}>
        		<ThemeUpdateContext.Provider value={toggleTheme}
				{children}
			</ThemeUpdateContext.Provider>
        	</ThemeContext.Provider>
	);
}

Now we can use this complete context file in other files to use that context's function and state.

import React from 'react'
import {ThemeProvider, useTheme, useThemeUpdate} from './ThemeContext'

export default function SomeComponent(){
	//note these are declared 'const', but it just means it keeps the same reference.
	const darkTheme = useTheme()
	const toggleTheme = useThemeUpdate()

	const themeStyle = {
		backgroundColor: darkTheme?'#000000':'#FFFFFF';
	}

	return(<ThemeProvider>
		<button onClick={toggleTheme}>click me to toggle dark theme! </button>
		<div style={themeStyle}>
			Hello man
		</div>
	</ThemeProvider>);

}

Just note that ThemeProvider has to be present at the outer for useTheme and useThemeUpdate (both of which makes call to useContext) to have an effect. We can actually refactor 'ThemeProvider' out to parent component, which is basically the main point of having a Context - any component within that context has an access to the contexts.

 

SomeComponent.js:

import React from 'react'
import {ThemeProvider, useTheme, useThemeUpdate} from './ThemeContext'

export default function SomeComponent(){
	//note these are declared 'const', but it just means it keeps the same reference.
	const darkTheme = useTheme()
	const toggleTheme = useThemeUpdate()

	const themeStyle = {
		backgroundColor: darkTheme?'#000000':'#FFFFFF';
	}

	return(<>
		<button onClick={toggleTheme}>click me to toggle dark theme! </button>
		<div style={themeStyle}>
			Hello man
		</div>
	</>);

}

App.js

import React from 'react'
import {ThemeProvider} from './ThemeContext'

export default function App(){
	return(
		<ThemeProvider>
			<SomeComponent />
		</ThemeProvider>
	);
}