React spring use units with values-CodePudding

I am using react-spring library to animate width of a component. How can I use different units with the animated values?

import { useSpring, animated } from "react-spring";

export default function App() {
const animatedProps = useSpring({
    from: { width: 0 },
    to: { width: 100 },
    duration: "12s",
});

return (
    <animated.h1
    style={{
        ...animatedProps,
        width: animatedProps   "vw",
        bacgroundColor: "red",
    }}
    >
    <div>Hello CodeSandbox</div>
    </animated.h1>
);
}

But it wouldn't work. How can I use units?

CodePudding user response：

Have you tried using from: {width: "0vw"}, to: {width: "100vw"}?

CodePudding user response：

react-spring uses px as a unit. So, I ended up manually converting the units to pixels.

valueInPx = (window.innerHeight * value)/100

eg.To say 40vw, you would use (window.innerHeight * 40)/100