Hello Sunil
react-drawer-component-feature-image

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.

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

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;

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;

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:

react-drawer-component

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’.

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.

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.

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.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.