Creating a Customizable Drawer Component in React: A Step-by-Step Guide

A drawer is a common UI pattern used to display additional content or options without cluttering the main interface. It typically slides in from the side of the screen and can be opened or closed by user interaction.

Setting Up the Project

Before we start creating the Drawer component, make sure you have a React project set up with styled-components installed.

If not, you can create a new React project using Vite:

npm create vite@latest drawer-demo
cd drawer-demo
npm install styled-components

Creating the Drawer Component

Let’s create a new file named Drawer.jsx in the src directory. This file will contain the code for our custom Drawer component.

// Drawer.jsx
import React from "react";
import styled from "styled-components";


const DrawerWrapper = styled.div`
  position: fixed;
  top: 0;
  ${(props) => (props.side === "left" ? "left: 0;" : "right: 0;")}
  height: 100%;
  width: 250px;
  background-color: #fff;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  transform: ${(props) =>
    props.open
      ? "translateX(0)"
      : props.side === "left"
      ? "translateX(-100%)"
      : "translateX(100%)"};
`;

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; 
  display: ${(props) => (props.open ? "block" : "none")};
`;

const CloseButton = styled.button`
  position: absolute;
  top: 10px;
  ${(props) => (props.side === "left" ? "right: 10px;" : "right: 10px;")}
  background: none;
  border: none;
  cursor: pointer;
`;

const Drawer = ({ open, side, onClose, children }) => {
  return (
    <>
      <DrawerWrapper open={open} side={side}>
        <CloseButton side={side} onClick={onClose}>
          X
        </CloseButton>
        {children}
      </DrawerWrapper>
      <Overlay open={open} onClick={onClose} />
    </>
  );
};

export default Drawer;

Using the Drawer Component

Now that we have our Drawer component ready, let’s integrate it into our React application. Create a new file named MenuDrawer.jsx in the src directory.

// MenuDrawer.js
import React, { useState } from 'react';
import Drawer from './Drawer';

const MenuDrawer = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);

  const toggleDrawer = () => {
    setDrawerOpen(!drawerOpen);
  };

  return (
    <div>
      <button onClick={toggleDrawer}>Toggle Drawer</button>
      <Drawer open={drawerOpen} side="right" onClose={toggleDrawer}>

				{/* Content of the drawer */}
        <h2>Drawer Content</h2>
        <p>This is some content inside the drawer.</p>
      </Drawer>
    </div>
  );
};

export default MenuDrawer;

Integrating into App Component

Finally, let’s integrate the MenuDrawer component into our main App.jsx file.

import React from 'react';
import MenuDrawer from './MenuDrawer';

function App() {
  return (
    <>
      <MenuDrawer />
    </>
  );
}

export default App;

Output:

Customizable Drawer Component with Left and Right Prop Values

In our customizable Drawer component built with React and styled-components, we’ve provided the flexibility to specify from which side the drawer should appear – either from the left or from the right.

This is achieved through the use of the side prop, which accepts values of ‘left’ or ‘right’.

Understanding the side Prop

The side prop determines the direction from which the drawer will slide into view. When set to ‘left’, the drawer will appear from the left side of the screen, while setting it to ‘right’ will make the drawer slide in from the right side.

How to Use the side Prop

When integrating the Drawer component into your application, you can simply pass the desired value for the side prop to customize the direction of the drawer. Here’s how you can use it:

<Drawer open={drawerOpen} side="right" onClose={toggleDrawer}>
  
  {/* Content of the drawer */}
  <h2>Drawer Content</h2>
  <p>This is some content inside the drawer.</p>
</Drawer>

In this example, the side prop is set to ‘right’, indicating that the drawer should slide in from the right side of the screen. If you want the drawer to appear from the left side instead, simply change the value of the side prop to ‘left’.

By allowing developers to specify the side from which the drawer should appear, our Drawer component offers enhanced flexibility and customization options.

This enables you to tailor the user experience according to the layout and design requirements of your application.

Whether you need the drawer to slide in from the left or the right, our customizable Drawer component provides the versatility you need to create seamless and intuitive UI interactions.

Conclusion

In this blog post, we’ve created a customizable Drawer component in React using styled-components.

This component can be easily integrated into any React application to provide drawer functionality for displaying additional content or options. With its flexible design, you can customize the appearance and behavior of the drawer to suit your application’s needs.