[Feature Request] A Drawer Component for NextUI

[moeen-mahmud]

Is your feature request related to a problem? Please describe.

I've been using NextUI in one of my side projects lately. I appreciate the simple and robust approach it offers, and I adore the UI overall. However, I am surprised it doesn't have a Drawer component! Although, I implemented it using a third-party library. But it's not enough. Third-party components lack native NextUI effects and support. It's also not the best approach, I guess.

NextUI should also have a Drawer like other UI libraries, e.g., Material UI, Ant Design, Mantine, etc.

Describe the solution you'd like

It'd be great to have a native Drawer component for NextUI. It'll save a lot of tedious jobs and broken tests.

As the Hacktoberfest has begun, it brings a fantastic opportunity to address this lacking feature and implement it right now.

I'd like to suggest that you guys should open an issue for this to implement that. I was also tinkering with the NextUI repo myself.

I'd love to work on that feature and contribute.

Describe alternatives you've considered

I'm temporarily using React Modern Drawer. It's minimal and easy to customize.

Screenshots or Videos

No response

[ytkg]

+1

[gajendr4]

A temporary alternative would be to use modal component with full-screen prop with inline css and media queries to setup max width to something like 30vw-70vw on different devices

[moeen-mahmud]

A temporary alternative would be to use modal component with full-screen prop with inline css and media queries to setup max width to something like 30vw-70vw on different devices

@gajendr4 Yeah, that's a straightforward option. But still, it would be great if we had such a component.

[maxtondelaney]

If anyone is looking for an example implementation where the modal is being used as a drawer, here's an implementation I put together that may work for you:

Drawer.tsx

import React from 'react';
import { Modal, ModalProps, useModal } from '@nextui-org/react';

import './styles.css';

type SubComponents = {
  Header: typeof Modal.Header;
  Body: typeof Modal.Body;
  Footer: typeof Modal.Footer;
};

type Props = Omit<
  ModalProps,
  'className' | 'fullScreen' | 'closeButton' | 'animated' | 'blur'
>;

const Drawer: React.FC<Props> & SubComponents = ({ children, ...props }) => {
  const { open } = props;

  return (
    <Modal
      className={`drawer drawer-animated ${
        open ? 'drawer-animated-slide-in' : ''
      }`}
      closeButton
      animated={false}
      {...props}
    >
      {children}
    </Modal>
  );
};

Drawer.Header = Modal.Header;
Drawer.Body = Modal.Body;
Drawer.Footer = Modal.Footer;

export const useDrawer = useModal;

export default Drawer;

styles.css

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 650px;
  border-radius: 0;
}

.drawer-animated {
  transform: translateX(-100%);
}

.drawer-animated-slide-in {
  animation: slide-in 0.3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

Usage:

import Drawer, { useDrawer } from './Drawer';

const { bindings, setVisible } = useDrawer();

<Drawer {...bindings}>
  <Drawer.Header>
    <Text>Header</Text>
  </Drawer.Header>
  <Drawer.Body>
    Body
  </Drawer.Body>
  <Drawer.Footer>
    <Button auto onClick={() => setVisible(false)}>
      Button
    </Button>  
  </Drawer.Footer>
</Drawer>

[prince272]

I think is solution is outdated for v2 right?

[moeen-mahmud]

Hey @maxtondelaney!

That looks cool and robust since we don't have any drawer components! Looking forward to explore more.

Thanks for the example

[THE-SIMPLE-MARK]

Are there any updates regarding this? This would be especially useful as the move to v2.0 has been completed. A great example of a drawer implementation is the one in chakra UI: https://chakra-ui.com/docs/components/drawer/usage

[rxunxk]

It's almost been a year. how long until we get our native drawer

[dougkeefe]

+1
..and the Chakra version looks good too.

[theofournier]

Update of the workaround of @maxtondelaney with v2

Drawer.tsx

import React from "react";
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalProps,
} from "@nextui-org/react";

import "./styles.css";

type Props = Omit<
  ModalProps,
  "className" | "fullScreen" | "closeButton" | "animated" | "blur"
>;

const Drawer: React.FC<Props> = ({ children, ...props }) => {
  const { isOpen } = props;

  return (
    <Modal
      classNames={{
        wrapper: "w-full",
      }}
      className={`drawer drawer-animated ${
        isOpen ? "drawer-animated-slide-in" : "drawer-animated-slide-out"
      }`}
      animated={false}
      placement="top"
      hideCloseButton
      size="full"
      {...props}
    >
      {children}
    </Modal>
  );
};

export const DrawerContent = ModalContent;
export const DrawerHeader = ModalHeader;
export const DrawerBody = ModalBody;
export const DrawerFooter = ModalFooter;

export default Drawer;

styles.css

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 500px;
  max-height: 100%;
  border-radius: 0;
  margin: 0;
}

.drawer-animated {
  transform: translateX(100%);
}

.drawer-animated-slide-in {
  animation: slide-in 0.3s forwards;
}

.drawer-animated-slide-out {
  animation: slide-out 0.2s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

Usage:

import Drawer, { useDrawer } from './Drawer';

const { bindings, setVisible } = useDrawer();

<Drawer {...bindings}>
  <DrawerHeader>
    <Text>Header</Text>
  </DrawerHeader>
  <DrawerBody>
    Body
  </DrawerBody>
  <DrawerFooter>
    <Button auto onClick={() => setVisible(false)}>
      Button
    </Button>  
  </DrawerFooter>
</Drawer>

[moeen-mahmud]

Hey @theofournier, thanks for the updated one!

[DrevaSergii]

+1

[XThenuwara]

Here's Custom Drawer using Next Modal Component

import React from "react";
import { Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure } from "@nextui-org/react";

interface Props extends React.HTMLProps<HTMLDivElement> {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}

const CustomDrawer: React.FC<Props> = ({ ...props }) => {
  return (
    <Modal
      scrollBehavior="inside"
      isOpen={props.isOpen}
      onOpenChange={props.onOpenChange}
      placement="center"
      backdrop="opaque"
      size="full"
      classNames={{
        wrapper: "flex justify-end",
      }}
      motionProps={{
        variants: {
          enter: {
            x: 0,
            opacity: 1,
            transition: {
              duration: 0.3,
              ease: "easeOut",
            },
          },
          exit: {
            x: 50,
            opacity: 0,
            transition: {
              duration: 0.2,
              ease: "easeIn",
            },
          },
        }
      }}
      className="rounded-md max-w-sm w-full h-screen max-h-screen">
      <ModalContent>{(onClose) => <>{props.children}</>}</ModalContent>
    </Modal>
  );
};

export default CustomDrawer;

[vitalijalbu]

On mobile screens motion very very sucks

[XThenuwara]

Update - better suit for the mobile devices, use dynamic view port height on modal class

className="rounded-md max-w-sm w-full  h-[calc(100dvh)] max-h-screen">

[iamyahia]

+1
However, we think NextJS is a fantastic UI library, and it needs a native Drawer as well.

[nguyenthengocit37]

We need a native Drawer plz

[Murraya-paniculata]

We need a native Drawer plz

[serious-snow]

We need a native Drawer plz

[vitalijalbu]

no need for you guys to comment.... they will never add new components.

they should listed more the public in my opinion... but it's ok