Implementing the new React Context API

Well to be frank I’m new to React development and I spend lot of time on google learning new stuff each and every day. In fact this is the first post related to react which I’m posting. So let’s dig into what I have to say today.

Why Context API?

Have you ever come across a situation where you have to pass props or states through your components from top to bottom of the component tree of your application? Some of them didn’t even care what the data which went through them. It’s one of the pains I went through when I first started developing react applications. The pain I went through actually had a name. It’s called “prop drilling”. So now you know what the you were doing right.

So to ease out the pain, we took help of state management libraries like redux. Which under the hood have been using the react context API which was an experimental feature at that time.

When to use the React Context?

So when do we really need to use the context API? As you know context API should be used when you need to share data across the application. Data which is considered “global” such as theme configurations, authentication objects and so on. But it’s not limited to those as well.

Let’s Dig in…

The Context API consists of three main components. The createContextmethod, Providerand the Consumer.

React.createContext : this will create an object with a pair of Provider , Consumer objects.

Provider : This is a react component which accepts a valueprop that can be passed to the decedent consumer components.

Consumer : A react component which is subscribed to related context changes. This component takes a function as it’s child which receives the context value as a parameter, and returns a react node. If the Provider value has not been passed, the default value which was used to create the context will be the same as the current context value.

A Simple Example

This will be a simple one to get you started with the context API and more is available in the React documentation it self. I’ll be updating my blog with some of the advance implementations in the future as well.

Initializing the context API :

Create a component as appcontext.js and initialize the context API in it.

import React from 'react';
const AppContext = React.createContext({
    theme : {
         appColor: 'red',
    }
});
export default AppContext;

So the above component will create a context object with a default object containing a key value pair of AppColor .

Now what we have to do is create a provider which will update the default value with the value we need.

import React from 'react';
import AppContext from './appcontext';
import HeaderComponent from './header'
class App extends React.Component {
     constructor(props){
          super(props);
          this.state = {
               headerColor : 'yellow';
          }
     }
     render() {
          return (
               <AppContext.Provider value={this.state} >
                     <HeaderComponent />
               </ AppContext.Provider>
          )
     }
}
export default App;

Let’s dig in to the HeaderComponent to see how the context value is used.

import React from 'react';
import AppContext from './appcontext';
class HeaderComponent extend React.Component {
      render() {
           return (
                <AppContext.Consumer>
                     {theme => (
                           <div style={
                              {backgroundColor:theme.headerColor}}>
                              <p>this is header</p>
                           </div> )
                     }
                </AppContext.Consumer>
            )
      }
}
export default HeaderComponent;

So the above component will take the headerColor property from the context object and apply it to the headerComponent without the need of passing props through the all the component.

This is a simple demonstration of the react context API which will ease out the development pain on handling global properties.

Kudos for taking your time to read my explanation. Always open for suggestions. :)

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.