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
791 stars 75 forks source link

Add ssr option, allow negative and percentage values for snapPoints #22

Closed MarkusWendorf closed 3 years ago

MarkusWendorf commented 3 years ago

This PR adds an ssr option that outputs the sheet content to the DOM on the server side (if isOpen=true). In addition it adds the option to use negative snapPoints (measured from the top) and percentage values (specified as 0.0 to 1.0).

I've added an example for the negative snap points value to SnapPoints.tsx. Is it required to have the snapPoints in descending order (I've added an assertion).

Feel free to comment and thanks for the library.

Temzasse commented 3 years ago

Oh wow this looks great! Thank you! 🙏🏻😊

On initial glance everything looked good but I'll take a deeper look at it and test it out when I have more time this week.

Temzasse commented 3 years ago

@MarkusWendorf do you have any suggestion for an easy way to test SSR? I have very little experience with SSR frameworks and I've been using the /example app as a playground for the lib but it's entirely client-side rendered so it doesn't help when I need to test SSR specific things.

MarkusWendorf commented 3 years ago

@Temzasse I provided two tests that check if ssr actually works (in the sense that the is output to the html. To do visual inspection / test, I think the best way would be to setup another example folder with Next.js for example. I can provide a setup tomorrow I think.

Temzasse commented 3 years ago

Thank you a lot @MarkusWendorf for this PR! 🙏🏻

I finalized the work in another PR in and merged it into master so I will close this PR 🙂