react-spring interpolate function not work with typescript

Question

I decided to introduce TypeScript in my React js application.

Having a problem with a component that uses react-spring for coordinate interpolation.

BEFORE TypeScript my component was like this:


function Card() {
    const [props, set] = useSpring(() => (
        {
            xy: [0, 0],
            config: {mass: 10, tension: 550, friction: 140}
        }));

    const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2]

    return (
        <div onMouseMove={({clientX: x, clientY: y}) => set({xy: calc(x, y)})}>
            <animated.div className="card1" style={{transform: props.xy.interpolate((x,y) => `translate3d(${x / 10}px,${y / 10}px,0)`)}}/>
        </div>
    );
}

everything is working properly.

AFTER typeScript:


function Card() {
    const [props, set] = useSpring(() => (
        {
            xy: [0, 0],
            config: {mass: 10, tension: 550, friction: 140}
        }));

    const calc = (x: number, y: number) => [x - window.innerWidth / 2, y - window.innerHeight / 2]

    return (
        <div onMouseMove={({clientX: x, clientY: y}) => set({xy: calc(x, y)})}>
            <animated.div className="card1" style={{transform: props.xy.interpolate((xy) => `translate3d(${xy[0] / 10}px,${xy[1] / 10}px,0)`)}}/>
        </div>
    );
}

It does not work, I have no compilation errors, simply no translation occurs. The "style" is not injected into the element.

Max K · Answer 1 · 2021-01-25T20:15:18.010

A little old question but maybe someone could need a better solution. Try to use the interpolate function as Stas Krul mentioned. but you don't have to seperate the properties x and y.

const trans = (x: number, y: number) => `translate3d(${xy[0] / 10}px,${xy[1] / 10}px,0)`

const Card = () => {
const [props, set] = useSpring<{ xy: number[] }>(() => (
    {
        xy: [0, 0],
        config: {mass: 10, tension: 550, friction: 140}
    }));

const calc = (x: number, y: number) => [x - window.innerWidth / 2, y - window.innerHeight / 2]

return (
    <div onMouseMove={({clientX: x, clientY: y}) => set({xy: calc(x, y)})}>
        <animated.div className="card1"
            style={{transform: interpolate(props.xy, trans)}}
        />
    </div>
);

}

score 2 · Answer 2 · answered May 08 '21 at 22:32

For me none of the previous answers helped with the issue.

Exploring the library more in dept, I found at the declaration file (node_modules/@react-spring/core/index.d.ts) these lines:

/** Map the value of one or more dependencies */
declare const to: Interpolator;
/** @deprecated Use the `to` export instead */
declare const interpolate: Interpolator;

So essentially, instead of using interpolate, you should now use to, as followed:

import { to } from "react-spring"

<animated.div style={{ transform: to(props.xy, trans) }} />

score 1 · Answer 3 · answered Jan 11 '20 at 14:23

I fixed the same problem by changing xy to separate left and top properties and then using interpolate function exported from react-spring package like here. Still not a perfect solution but it's certainly better than suppressing errors using // @ts-ignore.

score 0 · Answer 4 · edited Aug 30 '19 at 08:42

I had a similar problem. For hotfix just put // @ts-ignore:

function Card() {
    const [props, set] = useSpring(() => (
        {
            xy: [0, 0],
            config: {mass: 10, tension: 550, friction: 140}
        }));

    const calc = (x: number, y: number) => [x - window.innerWidth / 2, y - window.innerHeight / 2]

    return (
        <div onMouseMove={({clientX: x, clientY: y}) => set({xy: calc(x, y)})}>
            <animated.div className="card1" 
                // @ts-ignore
                style={{transform: props.xy.interpolate((xy) => `translate3d(${xy[0] / 10}px,${xy[1] / 10}px,0)`)}}
            />
        </div>
    );
}

Is there a way to fix this properly? – Evgeny Bobkin Oct 31 '19 at 20:24 — Evgeny Bobkin, Oct 31 '19 at 20:24

react-spring interpolate function not work with typescript

4 Answers4