Allow custom transitions for modals

Open
#4,787 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start at the react-bootstrap/Modal implementation and compare its prop handling with react-overlay/Modal. Trace how transition, backdropTransition, renderBackdrop, and handleHidden are handled. Done means the requested custom modal transitions work without requiring a separate bootstrap-specific Modal implementation.

Written by the indexing model from the issue text.

Description

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

Dominant language
TypeScript
Stars
22.6k
Forks
3.6k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-bootstrap/react-bootstrap

All issues in react-bootstrap/react-bootstrap

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.