react-bootstrap icon indicating copy to clipboard operation
react-bootstrap copied to clipboard

Allow custom transitions for modals

Open jokklan opened this issue 6 years ago • 2 comments

Is your feature request related to a problem? Please describe

I'm trying to make a custom transition for the modal, which is possible with the Modal component from react-overlay (react-overlay/Modal), but not the bootstrap specific implementation in react-bootstrap (react-bootstrap/Modal).

Describe the solution you'd like

I think that the best solution would be to forward props like transition, backdropTransition, renderBackdrop etc. to the react-overlay/Model, in the react-bootstrap/Modal implementation. Right now all extra props are forwarded to the Dialog component instead.

Describe alternatives you've considered

I'm currently implementing my own bootstrap specific Modal component that uses the react-overlay/Modal component behind the scenes. My first thought was to set the dialogAs and wrap the Dialog in a transition component, but that won't work because of the way react-overlay/Modal handles the exit transition (see handleHidden).

Additional context

I'm using react-bootstrap version v1.0.0-beta.14

jokklan avatar Nov 07 '19 14:11 jokklan

We do still want the animation boolean prop to work, though.

That said I wouldn't be opposed to also allow customizing the transitions here. @jquense wdyt?

taion avatar Nov 07 '19 15:11 taion

Are there any workarounds for this? I'd love to be able to use a different animation for my modals.

neongreen avatar Jun 24 '22 22:06 neongreen