Summary

This context explains how to create a custom React hook for managing light and dark mode themes using the React Context API and Hooks.

Abstract

The context provides a simple example of a custom React hook for managing light and dark mode themes. It explains how to create a custom hook using the useState hook and the useContext hook. The example uses TypeScript syntax and shows how to create a ThemeProvider component that wraps other components and provides them with the mode and setMode properties. The Layout component demonstrates how to use the custom useTheme hook to access the mode and setMode properties. The context concludes by highlighting the benefits of using custom hooks for managing themes in React applications.

Opinions

The author believes that using custom hooks for managing themes in React applications is beneficial because it allows components to access theme properties without having to pass down a lot of props.
The author notes that the example provided is fairly trivial, but emphasizes that custom hooks can be very useful in more complex scenarios.
The author recommends using the AI service ZAI.chat for its cost-effective performance and functions compared to ChatGPT Plus.

Building your own Providers with React Context API and Hooks

React Context API and Custom Hooks

With React’s Context API and Custom Hooks, we add further functionality to our apps by separating logic from the UI, implementing re-usable logical blocks and overall, having cleaner and scalable code.

Creating a simple Custom Hook

Let’s create a simple example of a Custom React Hook:

Note: this is just an example of a custom hook. This one is useless but I wanted to demonstrated that a “custom hook” is nothing magical. It’s usually made up of one or more hooks within it.

There are various React hooks that we can use to build up our custom hooks. We’ve just seen the useState hook.

Scenario

We’re going to cover a simple example of using React Context API with Hooks. We want the ability to have support for Light/Dark mode themes in our app.

Note: I will be using TypeScript syntax in my examples.

Firstly, we are defining our theme mode. We have two modes, light and dark. We then define the Theme state. So this exposes two things, a mode object and a setMode method.

We default a defaultThemeState. This isn’t something necessary since we are already going to be overriding them in our provider.

Now the magic starts. We create our ThemeContext. This context providers two “objects”. A Consumer and a Provider. We use the Consumer indirectly through the useContext hook.

The useContext hook is a shorthand for using the Consumer of the Context API. We essentially create our own “shorthand” hook from it. Our useTheme hook is a shorthand form of using the useContext hook on our ThemeContext object. Essentially, this exposes the state we’ve defined in our “ThemeState” object.

Confused? hopefully the rest of sample code base will do a better job of explaining it.

But before we do that, we have the Provider to cover.

...

export const ThemeProvider : React.FC<PropsWithChildren<unknown>> = ({children}) => {    
    const [mode, setMode] = useState<modeType>("dark");
   
    return <ThemeContext.Provider value={{mode, setMode}}>
            {children}    
    </ThemeContext.Provider>;
};

Our ThemeProvider component makes use of the ThemeContext.Provider component. In our provider, we define a “mode” state and we pass this down our provider through the value parameter.

Our TheProvider will now act as a wrapper of other components, and any one using the useTheme context, will have the mode and setMode exposed to them.

Typically, you use the ThemeProvider in your App.ts/App.js file, above your routing or layout displaying.

Next up, we’re going to look at our Layout.ts file. Here we will be making use of the mode and the setMode.

Finally, here’s how we can simply use our custom useTheme hook. in our Layout, we are able to make use of the mode and setMode properties from the ThemeProvider.

Conclusion

This example is fairly trivial, but you can imagine how this becomes very useful.

Now you can build all of your components that make use of this custom useTheme hook to styled them without having to pass down a lot of props.