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
832 stars 79 forks source link

set id for sheet for custom styling #16

Closed fairhat closed 3 years ago

fairhat commented 3 years ago

could you allow us to set an id for the sheet container?

Right now this assumes that only one sheet would exist on the page, however i am using multiple (and want to have them different widths on desktop) but custom styling is always applied to the classes.

Something like <Sheet id="custom-sheet"></Sheet> should be enough

Edit: Seems like setting an id for sheet.container actually works, however typescript is unable to identify the props. Maybe you could update the PropTypes with React.ButtonHTMLAttributes and Framer-Motion Props?

Temzasse commented 3 years ago

Good catch! 🙌🏻 I will add React.HTMLAttributes<HTMLDivElement> to the sheet props type declaration which should fix this. This will be available in the next release which will be v1.3.1.