Animate with the react-spring Library — useTransition Hook

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with react-spring.

useTransition

We can use the useTransition hook to add transitions to our React components.

For example, we can write:

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>
  ));
}

to animate the rendering of the arr array with the useTransition hook.

We create the items state from the useState hook.

Then we pass that into the useTransition hook as its first argument.

In the 2nd argument, we pass in a function to return the key property of each item, which is its unique ID.

It’s used by React to keep track of the items.

The 3rd argument has an object with the styles that we want to render before the animation with the from property.

The enter property has the styles to display when the item enters.

And the leave property has the styles to display when the item leaves.

Now we should see the numbers move down to the screen.

We can also use the useTransition hook to toggle between components.

For example, we can write:

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>
        )
      )}
    </>
  );
}

We have the toggle state, which is toggled with the button.

Then we call the useTransition hook to apply the styles by passing in the toggle state as the first argument.

The 3rd argument has the styles we want to apply when we animate.

When item toggles between truthy and falsy, then the corresp[onding emoji will display since we call transitions.map to map the transitions and.

item has the value that toggle has.

We can also use it to render things that are displayed when a condition is true .

For instance, we can write:

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>
          )
      )}
    </>
  );
}

Then when item is true , which is true when show is true , the emoji is displayed.

Conclusion

We can add transitions to our React components easily with the useTransition hook.