Backdrop transition has hardcoded opacity value

[javierjulio]

I was modifying some of the backdrop styles and noticed that no matter what I changed the --opacity variable to in my CSS, when I check the styles through the Element Inspector it was always set to 0.5 when the modal and backdrop were visible.

I noticed in the BaseModal that the opacity value is hardcoded: https://github.com/ChrisBrownie55/react-spring-modal/blob/08ae502fb9c4657ac94cba2416ddd0394c221b2d/react-spring-modal/src/shared/BaseModal.tsx#L78

Unless I'm missing something, it doesn't seem the backdrop transition can be overridden. I'm using modalTransition successfully to provide custom styles for a BottomModal instance. Would it be possible to support a modalBackdropTransition as well?

[andria-dev]

I could do something like that. The only issue would be related to onRest. It might be possible to provide an override property that is just spread over the current transition.

useTransition(/*...*/, {
  /* default --opacity stuff and on Rest */
  ...backdropOverride,
})

[andria-dev]

@javierjulio I'm working on a major change for this library and this issue should potentially be solved by it.

You would be able to change the overlay transition to do whatever it is you want. And, by default, it would be between 0 and 1 for the opacity. You would just need to set the background-color with rgba(), hsla(), or hex with alpha #rrggbbaa to control the final color and transparency after the transition.

[javierjulio]

Awesome thanks! I'd be happy to give that update a try once it's ready. I'm using this library in a simple memory game.

[andria-dev]

I opened up a GitHub Discussion about this new major revision if you'd like to see more about it or share your thoughts.

[andria-dev]

In version ~2.0.1~ you should be able to control the backdrop opacity value yourself. Closing this for now.

[andria-dev]

You can try this out now with 2.0.7 I had some publishing issues with NPM lol. I finally figured them out.