Getting Started

To install the React Transition Group library, run the following command using NPM:

npm install react-transition-group --save

Alternatively, you can use Yarn:

yarn add react-transition-group

Transition Component

To create transitions, you can use the Transition component. Here’s an example of how to implement it:

import React, { useState } from "react";

import { Transition } from "react-transition-group";

const duration = 300;

const defaultStyle = {

transition: opacity ${duration}ms ease-in-out,

opacity: 0

};

const transitionStyles = {

entering: { opacity: 1 },

entered: { opacity: 1 },

exiting: { opacity: 0 },

exited: { opacity: 0 }

};

const Fade = ({ in: inProp }) => (

<Transition in={inProp} timeout={duration}>

{(state) => (

<div

style={{

...defaultStyle,

...transitionStyles[state]

}}

>

I'm a fade Transition!

</div>

)}

</Transition>

);

export default function App() {

const [show, setShow] = useState(false);

return (

<div className="App">

<button onClick={() => setShow(!show)}>toggle</button>

<Fade in={show} />

</div>

);

}

In this example, we define a Fade component that uses the Transition component to manage the transition effects. The defaultStyle sets the initial appearance, while transitionStyles applies styles based on the transition state. The App component includes a button to toggle the visibility of the transition.

Now, when you click the toggle button, the text will appear and disappear with a fading effect.

CSSTransition Component

The CSSTransition component allows you to animate components using external CSS styles. Here's how you can implement it:

import React, { useState } from "react";

import { CSSTransition } from "react-transition-group";

import "./styles.css";

export default function App() {

const [show, setShow] = useState(false);

return (

<div className="App">

<button type="button" onClick={() => setShow(!show)}>

toggle

</button>

<CSSTransition in={show} timeout={200} classNames="my-node">

<div>I'll receive my-node-* classes</div>

</CSSTransition>

</div>

);

}

In styles.css, you would define the styles for each stage of the transition:

.my-node-enter {

opacity: 0;

}

.my-node-enter-active {

opacity: 1;

transition: opacity 200ms;

}

.my-node-exit {

opacity: 1;

}

.my-node-exit-active {

opacity: 0;

transition: opacity 200ms;

}

The CSSTransition component also uses the in prop to determine when to apply the transition. The timeout prop specifies the duration, while classNames serves as the prefix for the CSS classes applied during the transition.

Clicking the toggle button will now trigger a fade effect for the text.

Conclusion

Incorporating transition effects into your React applications is straightforward with the React Transition Group library. By using the Transition and CSSTransition components, you can easily enhance the user experience with smooth animations.