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
783 stars 74 forks source link

Sheet detents #96

Closed Temzasse closed 1 year ago

Temzasse commented 1 year ago

Continuation of https://github.com/Temzasse/react-modal-sheet/pull/83.

This implementation introduces a new prop called:

detent?: 'full-height' | 'content-height'

The detent term comes from Apple HIG's Sheets docs.

By setting detent to 'content-height' the sheet height will be dynamic and based on the content of the sheet. The sheet height cannot exceed the maximum sheet height (that is the default height when using full-height detent).

If snap points are provided when using content-height detent the height of the sheet will limit the available snap points. For example if the snap points are [700, 100, 0] and the sheet's height is 600 the user cannot snap to 700 since that would cause the sheet to be detached from the bottom. However if the sheet's height dynamically changes to 700 (or larger → scrollable) then the user can snap to the last snap point without issues since the content height is not restricting it anymore.

I also took the opportunity to refactor and clean up the codebase a bit.

nickgraffis commented 1 year ago

@Temzasse replaying here instead of #83 - this is perfect. Thanks for all the work you do on this lib, helped us and clearly is helping a lot of people.