Has anyone implemented a draggable drawer?

[paulbalogh]

I am using Drawer to open (on mobile) a bottom up sidebar. I wonder if anyone went a bit further and used framer-motion or something else to also make the drawer draggable (i.e. drag down -> close it). A working example or some general guidance would be great.

[laurensnl]

You can try something like this:

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  useDisclosure,
} from '@chakra-ui/core';
import { motion, PanInfo } from 'framer-motion';

export const SwipableDrawer = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const swipeConfidenceThreshold = 5000;
  const swipePower = (offset: number, velocity: number) => Math.abs(offset) * velocity;

  const onDrag = async (e: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
    const { offset, velocity } = info;
    const swipe = swipePower(offset.x, velocity.x);
    if (offset.x > 0 && swipe > swipeConfidenceThreshold) onClose();
  };

  return (
    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="lg">
      <DrawerOverlay />

      <motion.div drag="x" dragPropagation onDragEnd={onDrag}>
        <DrawerContent>
          <DrawerHeader>
            Header
          </DrawerHeader>

          <DrawerBody>
            Body
          </DrawerBody>

          <DrawerFooter>
            Footer
          </DrawerFooter>
        </DrawerContent>
      </motion.div>
    </Drawer>
  );
};

[paulbalogh]

OMG, this is fantastic, will try it asap!