Can't get React Springs's useSprings to work

Question

I'm trying to animate the position change of items in a list with React Spring.

Having an item fade in with useSpring is straightforward:

function App() {
  const [items, setItems] = React.useState([0, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0]);
    } else {
      setItems([0, 1]);
    }
  };

  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <>
      <animated.div style={props}>
        <button type="button" onClick={handleClick}>
          click
        </button>
      </animated.div>
      <ul className="App">
        {items.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </>
  );
}

However when I try and use useSprings I get an error:

function App() {
  const [items, setItems] = React.useState([0, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0]);
    } else {
      setItems([0, 1]);
    }
  };

  const springs = useSprings(items.length, items.map(item => ({ opacity: item.opacity }))

  return (
    <>
      <button type="button" onClick={handleClick}>
        click
      </button>
      <ul className="App">
        {items.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </>
  );
}

https://codesandbox.io/s/wonderful-oskar-v04vw

/src/index.js: Unexpected token, expected ","

The docs don't go into much detail: https://www.react-spring.io/docs/hooks/use-springs

Peter Ambruzs · Answer 1 · 2019-06-26T20:23:44.540

0

It is just a typo. One more closing parenthesis required.

Edit: I fixed the rest of the code as well, but I do not know what do you want to achieve. You can define different style attributes in the array for each element and change them.

function App() {
  const [items, setItems] = React.useState([0, 0.5, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0.5, 0]);
    } else {
       setItems([0, 0.5, 1]);
    }
  };

  const springs = useSprings(
    items.length,
    items.map(item => ({ opacity: item }))
  );

  return (
    <>
      <button type="button" onClick={handleClick}>
        click
      </button>
      <ul className="App">
        {springs.map((props, i) => {
          return (
            <animated.li style={props} key={i}>
              {i}
            </animated.li>
          );
        })}
      </ul>
    </>
  );
}

The updated sandbox: https://codesandbox.io/s/lucid-brown-ep7i7

edited Jun 26 '19 at 20:23

answered Jun 26 '19 at 12:47

Peter Ambruzs

7,763
3
30
36

This fixes that error (code sandboxupdated) but it's still not clear to me how to actually use it. I might go back to the render prop pattern, the documentation was much clearer. – Evanss Jun 26 '19 at 15:14
I also feel that the documentation here is not as good. I have to guess some of the syntax. – Peter Ambruzs Jun 26 '19 at 20:18
I'm trying to animate when items in a list change order, but I'm not sure if React Spring can actually do that. – Evanss Jun 26 '19 at 20:24
I'm sure that you can do it with useTranslation. Maybe with this useSprings as well, but its the first time I use it. I will look at it tomorrow. Its past midnight here. I'm out. – Peter Ambruzs Jun 26 '19 at 22:26

Can't get React Springs's useSprings to work

1 Answers1