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 custom document to be provided #3

Closed james2406 closed 3 years ago

james2406 commented 3 years ago

Hi @Temzasse. First of all, thank you for creating this library! It looks fantastic and has such an intuitive + flexible API.

This change would allow a custom document to be provided (useful in cases where you are rendering into an iframe).

Let me know what you think :)

Temzasse commented 3 years ago

Hi @james2406. Thanks for the PR! 🙏

I haven't played much with iframes so this use case is new to me. Would it be possible for you to provide an example of how a bottom sheet can be used inside an iframe?

james2406 commented 3 years ago

Sure thing. I'll probably have some time this weekend to put something together and link it here when it's ready

james2406 commented 3 years ago

I created a sandbox where you can see the content rendering outside of the iframe https://codesandbox.io/s/react-modal-sheet-iframe-xyfim. If you point the package.json to my fork, you'll see the content renders in the iframe.

The styled-components library has quite a nice way to handle this via a StyleSheetManager - which allows you to provide the element of the current document via the target prop. However, that approach is probably a bit over the top for this case.

Temzasse commented 3 years ago

Thank you @james2406!

I'll create a new example for this use case in my /examples folder and add the new prop for a custom document 👍

james2406 commented 3 years ago

Awesome. Thanks a lot!

I was just thinking today, do you think a more flexible solution would be to allow users of this library to change the portal domNode instead of providing a different document? This would solve the problem for people with iframes + allow anyone to change the rendering dom node (for whatever reason).

james2406 commented 3 years ago

I'd be more than happy to submit another PR + create another example sandbox if you agree.

Temzasse commented 3 years ago

Awesome. Thanks a lot!

I was just thinking today, do you think a more flexible solution would be to allow users of this library to change the portal domNode instead of providing a different document? This would solve the problem for people with iframes + allow anyone to change the rendering dom node (for whatever reason).

@james2406 yeah that might actually be a better solution 👍

Another PR for this idea is definitely welcome 🙏

PS: I just released 1.0.0 that dropped the support for framer-motion v1 which fixed some TS issues.

Temzasse commented 3 years ago

I quickly tested your initial iframe example and it seems that the gestures (dragging from the header) are not working inside the iframe 🤔

Temzasse commented 3 years ago

I'm going to close this for inactivity. Please update the PR with a working solution if this feature is still important to have in the lib 🙂