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

1. Create a context
2. Provide a context value
3. 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 :)