React project Theme Switcher using Context API | useContext hook | React Project

hello everyone and welcome back to the channel so guys in today's video we are going to make a theme Switcher app in reactjs basically in this video what we are going to do is we are going to make use of context API and we are going to learn the concept of context API and then we are going to make this app which is theme Switcher app now what this app does basically is we have created a component and inside this component we have a button change theme when I click on this button it will change the theme of my app from light to dark and if you also observe the current theme name is also displaying which is dark and if I change it again it will showcase it as light basically building this app is very easy but why we are building this app is because mostly in interviews this functionality is generally being asked because when you are using context API and when you have to answer this question what is context API and what is use context hook like you can understand that concept very easily with the use of this project so let's start building this project but before starting the video if you are new to the channel make sure to subscribe to the channel if you haven't done yet also if you haven't check the reactjs playlist on my Channel please make sure to check that too first thing that we want to do is we have to create a component and then we have to prepare the basic structure of our app so let's do that and in the app.js component we have just written a basic line which is hello and if you'll see our app on frontend it is looking like this as of now now in this video our main goal is to learn the concept of context API and not to write much CSS code so what I will do is I will just write the basic CSS code already and we will start building our app so that we don't have to waste more time on our uh on writing our CSS so you will get all the code in the description box make sure to check that too so let's start first of all what I will do is I will create a component okay and I will name it as theme switcher now let us use rafc and import this app in our app.js so import theme switcher and instead of hello let me write theme switcher so if you see now our app is looking like this now our component is prepared let's write the basic structure also so the basic structure should be something like instead of theme switcher here what we want is first of all it should say H1 and it should be like theme Switcher app okay let's save and see so we got the heading now what we want is we want a button so a button should display and it should some it should say something like toggle theme or change theme anything is fine so let's write toggle theme and we got a button now let's move forward and let's add one more line which should be a paragraph and they should say your current theme is and the theme name okay so for now let's light it a static way so the current theme is light okay and now what we want is when I click on this button the theme should change also the name of the theme should also change right so for to understand this concept what we are going to do is we are going to make use of context API first of all we are going to create our context and in that context we are going to create our theme state which will store the value of our current theme so let's do that so in order to do that what I need is I need to create a context so let's create a context so our context name we can give it some something like theme context so our context is now created so we know there are three steps when whenever we create a context first step is to create a context second is to provide the context and third is to consume the context let's do our first step which is creating the context so let me create a variable theme context and this is going to be the name of my context and here I'm going to make use of create context okay and just make sure that you are importing it from react our Step One is done which is like creating the context let me also export it let's move on to our step two which is creating the provider so F theme provider in that we will have a return statement and inside the return what we are going to do is we are going to write theme context. provider and here we are going to pass children so children we will get from here we will destructure it guys if you not aware how we are doing this I would suggest or I would highly recommend that please watch the video on my channel where I have explained what is context API in reactjs so I will also provide the link to the video in the I button now let us create the state over here and this state only we need to pass to our theme switcher component so the state name I'm going to keep it as theme and it will have a Setter function set theme we are going to make use of use State and inside the use State let's give a default value as light because we want that initially our theme value should be light and now how do we provide the value to our context so here in this way we write it value and value should be a type of object so here I'm writing theme now what we are doing is we are passing this theme value now this theme value can be consumed by our theme switcher component but before consuming we have to wrap our main component with the provider so let's do that for that I'm going to go to my app component and I'm going to import theme provider okay in order to import theme provider we also have to export it from here so let's export the theme provider so now we can import our theme provider here so now theme provider is imported let's now wrap our component with theme provider and this is important otherwise if if we are not wrapping our component with theme provider then you are not able to access it so once it is wrapped the next thing that we want to do is what we want is we want to consume the value of our theme so in order to consume it we will go to our theme switcher component and here I'm going to write con and the value of my state that I want to consume so that is theme Here what we are going to do is we are going to make use of use context hook in order to consume the value and inside the used context hook we have to give the name of our context so that is theme context now once this is done so instead of showing this light statically what I'm going to do is I'm going to remove it okay before removing so before writing the theme value let me save and show you so if you see right now there is no value over here what we are going to do is now we are going to show the value dynamically so here if I'll give te it should show light so if you see right now the light is coming dynamically now the next task that we want to do is when I click on this button this light value should be changed to dark okay and if it is dark it should be changed to light so let's achieve that first of all so in order to do that we have to write a function okay which will be called Whenever there is a click on the button so let us write that function also inside our context so here I'm going to create a function called as toggle theme you can give any name to your function and here what we are going to do is so con updated theme is equals to what we want is we want to first of all check what is the current value of our theme okay so here we will check if theme is equals to light okay then change it to so what I want is if my theme value is light then change it to dark so I'm going to write dark if it is not light then make it light so in this way we are storing the theme value in our updated theme and the same value we need to update to our set theme so once this is done now whenever this function is called our theme will be changed so let's pass this function also as a value so that we can call or consume this value in our theme switcher context so let's go to this theme switcher component and here I'm going to use this value here what I want is on button click this function should be called so I'm going to write on click event handler and I'm going to pass this function let's see if it is working so when I click on toggle theme you can see my value is getting changed now if you see our current theme value is now showing correctly light or dark but we actually want to show it in this way like how in our actual app we were showing so when I click on change theme the value or the background should change right so for that what we can do is we can simply attach some style so let's go to our component here in theme switcher component we have a Dev so here what I can do is I can write a inline style okay and in this inline style what we are going to provide is we are going to write background color and background color should have a value either light or dark so this have we have to do a conditional check on this first of all we will check if the current value of the theme is what light then what is the background color that we want to keep we want to keep a white color and if the color of the theme is dark then we want to keep it black color so in this way we are conditionally showing the background color let's see if it is working or not so if you see we have achieved finally our theme Switcher app in reactjs so I hope now you have completely got the understanding how theme switcher Works in reactjs and we have understood this concept using context API let us quickly wise what we have done so first of all in our app component what we have done is we have created our themes which are component and imported it next thing that we did was we created our context in context we know there are three step step one is to create a context the Second Step what that we did was to create a provider and provide it values so the there are two values that we have provide first one is our state value that is theme second one is our function okay then these values were provided here then the next thing that we did was we have wrapped our component using theme provider once that was done finally in our theme switcher component we are consuming the values using our use context hook and then based on those values we are performing our actions that is one is like we are showing the theme value and the second is we are showcasing our current background color based on the theme also we are using a on click event handler and based on that we are passing a toggle theme function to it so I hope now you have got understanding of how context API works and how can we perform theme switcher functionality using context API if you guys have any doubt related to this please feel free to ask in the comment section that's all for this video if you're new to the channel make sure to subscribe to the channel thanks for watching the video

Channel: The Humble coder

Views: 182

Keywords: context api, react context api, context api react, react context, context api tutorial, react context api project, context api react hooks, react context api tutorial, context api project, context api in react js, context api tutorial react, reactjs context api, context api vs redux, context api in react js in hindi, context, why context api, react js context api, learn context api, what is context api, context api react in hindi, react context tutorial

Id: WP9IHZcxEQY

Length: 9min 5sec (545 seconds)

Published: Wed May 08 2024