React Material-UI Drawer using hooks

Image for post
Image for post

Full code example:

Creating reusable components is essential in building quality applications. React and Material-UI make it seamless to integrate styled UI components into your own application. We will be creating a Drawer component that is controlled by React hooks. More specifically, useState and useContext .

Using the useContext hook, we can tell this component about our application context. There are several different approaches to this, such as, Redux, or MobX. We will be using React hooks for this application state.

Using the useState hook, we can integrate a local state that indicates if the drawer is open or not.

Using context requires that we create a context object and wrap the parts of our application using a provider.

// context/Settings/SettingsProvider.jsimport React, { useState } from 'react';
import SettingsContext from './SettingsContext';
// Save settings to local storage
const storage = {
getItem(key) {
if (localStorage) {
return localStorage.getItem(key);
setItem(key, value) {
if (localStorage) {
return localStorage.setItem(key, value);
const SettingsProvider = props => {
const [darkMode, setDarkMode] = useState(
storage.getItem('darkMode') === 'true'
const onSetDarkMode = darkMode => {
storage.setItem('darkMode', darkMode);
return (
export default SettingsProvider;

Now that we have our context, we can wrap the parts of our application where we want to use context.

Creating the application logic to show the Drawer. Using the context we can show either a default theme or dark theme.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store