Drawer

The RhDrawer component enables the creation of a flexible and customizable drawer-like UI element for web applications. It has a variety of props that can be used to control its appearance and behavior.

Usage

Once installed, you can import the RhDrawer component into your React application:

copy

import {RhDrawer} from "@rhythm-ui/react"

Then, you can use the RhDrawer component in your JSX code:

copy

function Default() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <RhDrawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        className={"bg-gray-500"}
        position="left"
        size="narrow"
        closeOnOutsideClick={false}
        backdrop={false}
        variant="temporary"
      />
      <RhButton onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open Drawer"}
      </RhButton>
    </>
  );
}

RhDrawer Props

Name	Type	Default	Description
isOpen	boolean	true	It is a boolean-type prop that comes from user logic to keep the drawer open or close
onClose	() => unknown		This function is to close the drawer by clicking on the trigger button
size	"narrow" \| "medium" \| "wide" \| "extended" \| "full"	narrow	Size prop is active only for temporary drawer variant
position	"top" \| "bottom" \| "left" \| "right"	left	Position prop is active only for temporary drawer variant
closeOnOutsideClick	boolean	false	This prop is functional when the variant prop is 'temporary'
backdrop	boolean	false	Backdrop prop is functional when the variant prop is 'temporary'
children	ReactNode		Can be passed any custom component as drawer children
variant	"temporary" \| "persistent"		Variant = temporary gives the drawer that comes over the content. variant = persistent gives the drawer that pushes the content and takes space in the DOM flow
mini	boolean	false	If the content is an icon with a label, mini is the must-prop that should be there with a persistent variant. - mini prop does not work with temporary variant
responsive	boolean	false	Responsive true makes the drawer responsive. On the small screen drawer will become temporary and on the large screen drawer will become persistent

With backdrop

The backdrop prop adds a semi-transparent background behind the drawer to improve contrast and focus.

copy

function Backdrop() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <RhDrawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        className={"bg-gray-500"}
        position="left"
        size="narrow"
        closeOnOutsideClick={true}
        backdrop={true}
        variant="temporary"
      >
        <span
          className="absolute top-2 right-2 cursor-pointer"
          onClick={() => setIsOpen(false)}
        >
          <RhIcon icon="heroicons:x-mark" className="text-xl" />
        </span>
      </RhDrawer>
      <RhButton onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open Drawer"}
      </RhButton>
    </>
  );
}

Close on outside onClick

The closeOnOutsideClick prop enables or disables the ability to close the drawer by clicking outside of its bounds.

copy

function OutsideClick() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <RhDrawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        className={"bg-gray-500"}
        position="left"
        size="narrow"
        closeOnOutsideClick={true}
        backdrop={true}
        variant="temporary"
      />
      <RhButton onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open Drawer"}
      </RhButton>
    </>
  );
}

Persistent

In the Persistent variant set, the RhDrawer component will remain visible on the screen at all times, even when the user interacts with other elements on the page. This makes it ideal for situations where the user needs to access the drawer frequently or needs to keep it open for an extended period.

copy

function persistentClick() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex relative items-center justify-center h-[100vh]">
      <div className="w-full h-[80vh] overflow-y-auto flex">
        <RhDrawer
          className="bg-gray-500"
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          variant="persistent"
        />
        <div className="flex flex-col text-justify text-cyan-100 bg-slate-600 h-max">
          <div className="sticky top-0 bg-primary-100 flex items-center">
            <span
              className="flex items-center text-gray-800 m-2 cursor-pointer"
              onClick={function noRefCheck() {}}
            >
              <RhIcon
                onClick={() => setIsOpen(!isOpen)}
                className="text-xl"
                icon="heroicons:bars-3-20-solid"
              />
            </span>
          </div>
          <div className="p-10">
            <h1 className="text-center text-6xl">DRAWER EXAMPLE</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus sapiente
            accusamus accusantium nihil laudantium, amet consequuntur quaerat sunt
            minus unde obcaecati nisi consequatur quia saepe quo. Vel, tempore. Harum,
            esse! Officiis est, velit, debitis, delectus quasi nostrum voluptates
            tempore dolor aperiam exercitationem voluptatum? Nostrum commodi veniam
            ex illum repellat rerum ab, sapiente, numquam animi quisquam blanditiis
            quasi, qui quibusdam consectetur. Minima, modi voluptatum necessitatibus,
            pariatur amet vero aliquam, earum perspiciatis quidem quasi et!
          </div>
        </div>
      </div>
    </div>
  );
}

Mini

The RhDrawer component has a mini prop that displays a smaller drawer panel, taking up less screen space.

copy

function miniClick() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex relative items-center justify-center h-[100vh]">
      <div className="w-full h-[80vh] overflow-y-auto flex">
        <RhDrawer
          className="bg-gray-500"
          isOpen={isOpen}
          mini
          onClose={() => setIsOpen(false)}
          variant="persistent"
        />
        <div className="flex flex-col text-justify text-cyan-100 bg-slate-600 h-max">
          <div className="sticky top-0 bg-primary-100 flex items-center">
            <span
              className="flex items-center text-gray-800 m-2 cursor-pointer"
              onClick={function noRefCheck() {}}
            >
              <RhIcon
                onClick={() => setIsOpen(!isOpen)}
                className="text-xl"
                icon="heroicons:bars-3-20-solid"
              />
            </span>
          </div>
          <div className="p-10">
            <h1 className="text-center text-6xl">DRAWER EXAMPLE</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus sapiente
            accusamus accusantium nihil laudantium, amet consequuntur quaerat sunt
            minus unde obcaecati nisi consequatur quia saepe quo. Vel, tempore. Harum,
            esse! Officiis est, velit, debitis, delectus quasi nostrum voluptates
            tempore dolor aperiam exercitationem voluptatum? Nostrum commodi veniam
            ex illum repellat rerum ab, sapiente, numquam animi quisquam blanditiis
            quasi, qui quibusdam consectetur. Minima, modi voluptatum necessitatibus,
            pariatur amet vero aliquam, earum perspiciatis quidem quasi et!
          </div>
        </div>
      </div>
    </div>
  );
}

Responsive

The responsive true makes the drawer responsive. On a small screen, the drawer will become temporary and on a large screen, the drawer will become persistent

copy

function responsiveClick() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex relative items-center justify-center h-[100vh]">
      <div className="w-full h-[80vh] overflow-y-auto flex">
        <RhDrawer
          backdrop
          className="bg-gray-500"
          closeOnOutsideClick
          isOpen={!isOpen}
          onClose={() => setIsOpen(false)}
          responsive
        />
        <div className="flex flex-col text-justify text-cyan-100 bg-slate-600 h-max">
          <div className="sticky top-0 bg-primary-100 flex items-center">
            <span
              className="flex items-center text-gray-800 m-2 cursor-pointer"
              onClick={function noRefCheck() {}}
            >
              <RhIcon
                onClick={() => setIsOpen(!isOpen)}
                className="text-xl"
                icon="heroicons:bars-3-20-solid"
              />
            </span>
          </div>
          <div className="p-10">
            <h1 className="text-center text-6xl">DRAWER EXAMPLE</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus sapiente
            accusamus accusantium nihil laudantium, amet consequuntur quaerat sunt
            minus unde obcaecati nisi consequatur quia saepe quo. Vel, tempore. Harum,
            esse! Officiis est, velit, debitis, delectus quasi nostrum voluptates
            tempore dolor aperiam exercitationem voluptatum? Nostrum commodi veniam
            ex illum repellat rerum ab, sapiente, numquam animi quisquam blanditiis
            quasi, qui quibusdam consectetur. Minima, modi voluptatum necessitatibus,
            pariatur amet vero aliquam, earum perspiciatis quidem quasi et!
          </div>
        </div>
      </div>
    </div>
  );
}