search

manufont / react-swipeable-bottom-sheet

A swipeable material's bottom sheet implementation, using react-swipeable-views
MIT License
131 stars 36 forks source link

Add class to body when open #8

Closed gustavopch closed 7 years ago

gustavopch commented 7 years ago

There are cases where one may want to set body { overflow: hidden } to avoid two scrollbars at the same time: one for the body and one for the bottom sheet, but as discussed in #6 the bottom sheet should not interfere with the page layout.

Maybe this component should do the same as https://github.com/reactjs/react-modal#body-class does: add a class (e.g.: ReactSwipeableBottomSheet--open) to the body when it's open. Then the user can define whatever CSS rules he wants using such CSS class.

This would cover most of the cases while not imposing anything.

manufont commented 7 years ago

Good point, I just added your suggestion. Plus, the body class is changed to ReactSwipeableBottomSheet--closed when it's closed.

gustavopch commented 7 years ago

@manufont Nice! Could you update de npm version?

manufont commented 7 years ago

@gustavopch Done !

gustavopch commented 7 years ago

@manufont Now I noted you applied the className to the bottom sheet's own "body" element. I was actually referring to the of the page, as react-modal does.