React Project: Creating a dark mode toggle using the Context API

In this tutorial, we’ll take a look at the Context API in React by building a simple app that can toggle between light and dark mode.


Code is here: https://github.com/codebubb/context-api-tutorial


React Project: Creating a dark mode toggle using the Context API
---------------------------------------------------------------------------------------------------------
00:00 Introduction

00:22 Project overview
02:02 Creating components
05:31 CSS Layout
08:11 Creating the Context
10:02 Getting the Context
10:55 Toggling Light / Dark mode
14:51 Accessing context in nested components (setting the theme)
23:11 Wrap-up


— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —


So in this React Project we’ll be creating a small app (just a few components) that allows the user to toggle between light and dark mode.


The real point of the tutorial though is to learn about the Context API and how you can use it to wrap certain components in a ‘context’ which can then access a shared state, in our case whether the app is in ‘light’ or ‘dark’ mode.


We’ll start off by creating the components for our app and then we’ll apply some basic CSS layout styles.


Once setup, we’ll look at how to use the Context API with React by creating a context and then wrapping the components (the entire app for us) in a Context Provider.


We’ll then take a look at how we can access the context from within our React header component and then look at how to toggle the light / dark mode state which leads us on to applying the theme within the sub components.


So hopefully by the end of the tutorial you’ll have a good idea as to what the Context API is and how you could make use of it to share state in your apps!


#react #contextapi Channel Handle @codebubb