search

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
815 stars 77 forks source link

allow for relative snappoints #17

Closed fairhat closed 3 years ago

fairhat commented 3 years ago

Hey again,

noticed a bug: If i set the snappoint to e.g 600 (which is the height i want to have on desktop) causes the mobile ui to "oversnap" the sheet out of the viewport (because the phone im testing this with has actually <600 px viewport height)

any ideas how to prevent this from happening?

vbylen commented 3 years ago

I'm solving it like this: const snapPoints = React.useCallback(isMobile? [500, 100] : [600, 100], [isMobile]);

Temzasse commented 3 years ago

Yep @10000multiplier solution looks good. I leave these kind of things for the user to handle since I don't want to make too many assumptions about the usage of this lib.

You could utilize react-use to detect the mobile breakpoint in JS with useMedia.

Or you can clamp the max snap point based on the height of the window like this:

const maxSnapPoint = Math.min(window.innerHeight, 600);
const snapPoints = [maxSnapPoint, 100, 0];

I hope this helps 🙂