Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
783 stars 74 forks source link

Dragging very quickly moves the sheet off the page #105

Closed billpull closed 1 year ago

billpull commented 1 year ago
     const ref = useRef<SheetRef>();
      const snapTo = (i: number) => ref.current?.snapTo(i);

      const switchBottomSheet = (value: boolean) => {
        setIsExpanded(value);
        snapTo(value === false ? 1 : 0);
      };
    <Sheet
      ref={ref}
      isOpen={true}
      snapPoints={[320, 80]}
      initialSnap={1}
      onSnap={(index) => (index === -1 ? switchBottomSheet(!isExpanded) : null)}
      springConfig={{
        stiffness: 700,
        damping: 1200,
        mass: 0.2,
      }}
      onClose={() => null}
      rootId="_next"
    >
      <Sheet.Container>
        <Sheet.Header>
          ....
        </Sheet.Header>
        <Sheet.Content>
         .....
        </Sheet.Content>
      </Sheet.Container>

      {/* <Sheet.Backdrop /> */}
    </Sheet>

https://user-images.githubusercontent.com/854970/204619812-f13a0e5e-b0a5-4675-ae9d-9da6c2272803.MP4

Temzasse commented 1 year ago

Hi 👋 Currently there is no way to force the sheet to not be closable so you need to re-open it in the onClose handler if the user closes the sheet by dragging it down fast.

See this issue for more information.