From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Theme switcher and header component

Theme switcher and header component

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Theme switcher and header component

“

Welcome back. Now let's implement our header component. In this component folder, we are going to have a new file, header.tsx, we are going to do rafce. This will give us our initial header component. Over here, we are going to call our context. We can do it by UseContext and we need to pass in the context here, which is ThemeContext we just created. We have to check if the context is somehow not being implemented, then we should not be able to render anything. So this is the part of error handling that we are going to do, that something is wrong with the application. Let's restructure the theme we are going to have inside our context. Now we can change this div to have a header instead. We can give it a class name and let's make it dynamic since we have to use our theme. We are going to give a padding of 4, flex, justify between, a item sender. After that, we are going to use a templated string here. We can put a condition here. If the theme is equal to dark, we can do a background a…

Contents