Introduction

The code for our project can be found here

This will be a simple demonstration of how the context API works but, before then let's define a key concept; Prop Drilling

Prop Drilling: I will try to simplify this as easy as possible, say you are at point A and you want to get to point C(your destination) but there is also a point B and in order for you to get to C, you probably have to go through B even though B needs not to know that you are going to C because B can serve as a passage for you. So what we are trying to achieve is to have A get to C directly without going through B.

This same scenario applies to components in React, say we want to send a prop from component A to component C, having to pass that prop through B may be inefficient, this is what prop drilling is all about.

What is Prop Drilling?

It is the process in a React app where props are passed from one part of a tree to another by going through other parts that do not need the data but only help in passing it through the tree

So, I hope this gives a high-level understanding of what context aims to solve.

We will be building a simple theme switcher. This is just to give a high-level understanding of what the context API does.

We will be using the context API and the useReducer hook to share and manage our states respectively in our application.

For this tutorial, I will be using vite to create a react app. You can use create-react-app. Also, we will be using typescript.

If you are using vite, run the command below on your terminal in the directory of your choice.

npm init vite@latest theme-switcher --template react-ts

After this run the command below in your app folder to install all dependencies.

npm install

If you are using create-react-app, run the command below

npx create-react-app theme-switcher --template typescript

You can look up the scripts on package.json file for any of the installations to start the application. Hopefully, you'd have it running on port 3000.

Let's create a folder "contexts" on our source folder or better still you can look up the code on Github.

As earlier stated, we will be using the useReducer hook. If you have knowledge of redux, this should be easy to understand. You can check the code for a better understanding.

We will also be creating a hook "useThemeContext" for better access to our context

After we define our Context and ContextProvider, we will surround our App component with the context. This is updated on our main.tsx or index.tsx file as below. This will enable us to pass the color prop to every component in our application but for this case. We will also add a minimal css file to beautify our swatches.

<ThemeProvider>
     <App />
 </ThemeProvider>

You can look up the code on github

Also, see sample of our theme switcher below;

Thank you for reading, hopefully, you learnt something. Honest feedbacks are also welcomed.