Learn React Hooks

Defining the context

First, we have to define the context. The way this works has not changed since Hooks were introduced.

We simply use the React.createContext(defaultValue) function to create a new context object. We set the default value to { primaryColor: 'deepskyblue' }, so our default primary color, when no provider is defined, will be 'deepskyblue'.

In src/App.js, add the following definition before the App function:

export const ThemeContext = React.createContext({ primaryColor: 'deepskyblue' })

Note how we are exporting ThemeContext here, because we are going to need to import it for the consumer.

That is all we need to do to define a context with React. Now we just need to define the consumer.