React Transition Group is a widely used external library that helps handle animations and Transitions in React applications. It offers a straightforward approach to incorporating CSS Transitions and animations into components when added or removed from the DOM or when their state changes.
The library offers components that allow us to define Transition behavior for components in different stages.
Some of the key components provided by React Transition Group include:
<Transition>: This component defines a single Transition and provides hooks to handle a component's entering and exiting states.
<CSSTransition>: This component extends <Transition> and adds support for CSS classes. It allows us to define CSS classes to be applied during different stages of the Transition.
<SwitchTransition>: The <SwitchTransition> component is a React component that allows us to control the render between state Transitions.
<TransitionGroup>: This component is used to group multiple <Transition> or <CSSTransition> components together. It helps manage the Transitions of multiple components as a group.
We can use these components to define animations and Transitions for various scenarios, such as mounting and unmounting components, toggling component visibility, or updating component states. React Transition Group provides a straightforward API and allows us to control the timing and appearance of Transitions using CSS classes and styles.
To use React Transition Group, we first need to install it. To install react Transition group, we can use the following command:
npm install react-transition-group
Then, create a Transition component. This component accepts several props, such as the name of the Transition, the duration of the transition, and the CSS classes that should be assigned to the component during different stages of the Transition.
After creating a Transition component, we can incorporate it into our React component tree. As the component mounts or unmounts, the Transition component will handle the animation of the component's state to reflect the desired changes.
Lines 1–3: We import the necessary libraries and the .css file.
Lines 5–11: The App component is defined as a class component that extends React.Component. It has a constructor that sets the initial state with an array of items.
Lines 13–18: The addItem method is defined to add a new item to the state. It generates a new item based on the length of the existing items array and updates the state.
Lines 20–25: The removeItem method is defined to remove an item from the state based on its index. It creates a new array of items excluding the item at the specified index and updates the state.
Lines 27–28: The render method is responsible for rendering the component's JSX markup. Next, we initialize items with the state.
Line 32: It renders a button with an onClick event handler that triggers the addItem method.
Lines 33–42: Within the TransitionGroup component, we map over the items array in the state and render a CSSTransition for each item. The CSSTransition component receives a unique key prop and defines a timeout 500ms for the Transition. It also uses the class name item for the Transition animation. Inside each CSSTransition, a <div> element with the class name item-container is rendered. It contains the item text, a button with an onClick event handler that triggers the removeItem method with the item's index.
Free Resources