What is Context API?
This provides a way of passing down values from the parent component to its child component within the component tree.
Making use of this approach avoids manually passing down props down a component tree.
How to use context API
- Create a context
- Provide a context value
- Consume the context value
Create a Context
Here you will have to create a context using the react context API as shown below.
const UserContext = React.createContext()
NB: You may decide to pass a default value or string inside the createContext as shown below and as such you won't be needing the <UserProvider />
component.
const UserContext = React.createContext('Kene')
Export Provider and Consumer
const UserProvider = UserContext.Provider
const UserConsumer = UserContext.Consumer
export { UserProvider, UserConsumer }
Now it is time to look for your parent component and provide the API
What does Provider really do?
As the name implies, it provides the data/value the child components needs that will be passed down from the top-level/parent component.
For instance, UserProvider
is our Provider in this case.
So import UserProvider
in the parent component as shown below;
import { UserProvider } from 'yourfile/path/'
and wrap the parent component(s) with it.
<UserProvider>
<ParentComponent />
</ UserProvider>
Provide a Content value
Provide a content value that will be passed down to the child components tree.
For example, we will use a string as a value.value = Charles
<UserProvider value='Charles'>
<ParentComponent />
</ UserProvider>
Consume the Context value
Consume the context value in the descendant components you desire, by returning a function inside the UserConsumer
component. Then pass a function inside it and a parameter that displays the JSX required.
Firstly, import the UserConsumer component as shown below in the desired component.
import { UserConsumer } from 'yourfile/path/'
Return a function inside UserConsumer component
<UserConsumer>
{
user => {
return <div> Hello {user} </div>
}
}
</ UserConsumer>
Using contextType
You can use contextType
as an alternative to the <UserConsumer />
component if you are using the Class component in react.
Export UserContext
export default UserContext
Import UserContext in the child component you want
import UserContext from 'yourfile/path/'
If your application supports Public class filed syntax, do the following below just before the render()
method.
static contextType = UserContext
Then do this inside the return()
statement.
{this.context}
Consuming Multiple contexts
Creat the contexts and provide them as shown below.
const ThemeContext = React.createContext()
const UserContext = React.createContext()
const ThemeProvider = ThemeContext.Provider
constThemeConsumer = ThemeContext.Consumer
const UserProvider = UserContext.Provider
const UserConsumer = UserContext.Consumer
export {ThemeProvider, ThemeConsumer, UserProvider, UserConsumer}
Provide in the Top level/Parent Component
import { ThemeProvider, ThemeConsumer, UserProvider, UserConsumer } from 'yourfile/path/
<ThemeProvider value={theme}>
<UserProvider value={signedOutAdmin}>
<Layout />
</UserProvider>
</ThemeProvider>
Consume in the desired component
import { ThemeConsumer, UserConsumer } from 'yourfile/path/
<ThemeConsumer>
{theme => (
<UserConsumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserConsumer>
)}
</ ThemeConsumer>
Yay!, so this is the end of the article.
Thanks for reading :)