Animating React Components with the react-spring Library
Written on
Chapter 1: Introduction to react-spring
The react-spring library simplifies the process of adding animations to your React applications. In this guide, we will explore how to utilize the useTransition hook for creating smooth transitions in your components.
To illustrate, we can write the following code:
import React, { useState } from "react";
import { useTransition, animated } from "react-spring";
const arr = [
{ text: 1, key: 1 },
{ text: 2, key: 2 },
{ text: 3, key: 3 }
];
export default function App() {
const [items] = useState(arr);
const transitions = useTransition(items, (item) => item.key, {
from: { transform: "translate3d(0,-40px,0)" },
enter: { transform: "translate3d(0,0px,0)" },
leave: { transform: "translate3d(0,-40px,0)" }
});
return transitions.map(({ item, props, key }) => (
<animated.div key={key} style={props}>
{item.text}</animated.div>
));
}
This snippet animates the rendering of the arr array through the useTransition hook.
Section 1.1: Setting Up State
We initialize the items state with the useState hook, then pass it as the first argument to the useTransition hook. The second argument is a function that returns the unique key for each item, which helps React manage the items efficiently. The third argument is an object that defines the animation styles, including the initial state (from), the entering state (enter), and the leaving state (leave).
Now, when executed, we should observe the numbers smoothly transitioning down the screen.
Subsection 1.1.1: Toggling Between Components
We can also use the useTransition hook to toggle between different components. For example:
import React, { useState } from "react";
import { useTransition, animated } from "react-spring";
export default function App() {
const [toggle, set] = useState(false);
const transitions = useTransition(toggle, null, {
from: { position: "absolute", opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return (
<>
<button onClick={() => set(!toggle)}>toggle</button>
{transitions.map(({ item, key, props }) =>
item ? (
<animated.div style={props} key={key}>
<span role="img" aria-label="smile">😊</span></animated.div>
) : (
<animated.div style={props} key={key}>
<span role="img" aria-label="smile">😢</span></animated.div>
)
)}
</>
);
}
Here, we maintain a toggle state that is switched by clicking a button. The useTransition hook applies the desired styles based on the toggle state. When toggled, the corresponding emoji is displayed using transitions.map.
Section 1.2: Rendering Conditional Content
You can also use the useTransition hook to display elements conditionally. For instance:
import React, { useState } from "react";
import { useTransition, animated } from "react-spring";
export default function App() {
const [show, set] = useState(false);
const transitions = useTransition(show, null, {
from: { position: "absolute", opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return (
<>
<button onClick={() => set(!show)}>toggle</button>
{transitions.map(
({ item, key, props }) =>
item && (
<animated.div key={key} style={props}>
<span role="img" aria-label="smile">😃</span></animated.div>
)
)}
</>
);
}
In this example, when show is true, the emoji is rendered.
Conclusion
The useTransition hook from the react-spring library allows for effortless transitions in React components. For more engaging content, consider subscribing to our YouTube channel!