I'm currently implementing a Modal component within my app, utilizing Portals. My goal is for the Modal to smoothly fade in when it is rendered and fade out when it is no longer displayed.
Upon examining the documentation for react-transition-group, I noticed that props are necessary to achieve this effect. However, I prefer a solution without any reliance on state or props. Consider the following:
<App>
<Modal />
</App>
In this scenario, App should load normally, while the Modal fades in. Once a condition, located farther above these components, causes the Modal to no longer be rendered, it should then fade out.
Here's the actual code for
import Fade from "../Fade";
import { TransitionGroup } from "react-transition-group";
const Modal = ({ children, ...other }) => {
return (
<Portal>
<TransitionGroup>
<Fade>
{children}
</Fade>
</TransitionGroup>
</Portal>
);
};
And here's the Fade component:
import { CSSTransition } from 'react-transition-group';
const Fade = ({ children, ...other }) => (
<CSSTransition
{...other}
timeout={500}
classNames={{
//my classes here
}}
>
{children}
</CSSTransition>
);
Do you have any suggestions? It used to work before React 16 and the transition library changed from react-css-transitions to react-transition-group. I'm struggling to find a solution.
To clarify, I already have a working example using state/props to achieve the transition. However, this is not what I am aiming for. Instead, I want it to fade in when rendered and fade out when no longer displayed...
Thank you!