1

Bug Report

const [index, set] = useState(0);

const transitions = useTransition(slides[index], (item: Slides) => item.id, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses,
});

console.log(transitions);

useEffect(() => void setInterval(() => set((state) => (state + 1) % 4), 2000), []);

return (
    <Wrapper className={className}>
        {transitions.map(({ item, props, key }) => (
            <animated.div key={key} class='bg' style={{ ...props, backgroundImage: `url(${item.url}` }} />
        ))}
    </Wrapper>
);

results in this:

Argument of type '{ from: { opacity: number; }; enter: { opacity: number; }; leave: { opacity: number; }; config: { readonly tension: 280; readonly friction: 120; }; }' is not assignable to parameter of type 'any[]'. Object literal may only specify known properties, and 'from' does not exist in type 'any[]'. TS2345

31 | 
32 |        const transitions = useTransition(slides[index], (item: Slides) => item.id, {
33 |                from: { opacity: 0 },

git repo : https://github.com/LOGANLEEE/resume/tree/useTranstion_issue

Environment

"react-spring": "^9.0.0",
"react": "^17.0.2",
zhulien
  • 5,145
  • 3
  • 22
  • 36
Logan Lee
  • 430
  • 6
  • 18
  • useTransition syntax is changed in v9. The documentation is not updated yet on the main site. You can check the new syntax here: https://aleclarson.github.io/react-spring/v9/breaking-changes/#The-useTransition-hook – Peter Ambruzs Apr 06 '21 at 08:52

0 Answers0