What will be prop types of useSpring

Question

I'm using react spring for animating svg paths, toggling strokeDashArray. Here I've written this in the parent

  const dashArrayAnimation = useSpring({
    loop: {
      reverse: true,
    },
    from: { strokeDasharray: toggle ? 0 : 5 },
    to: { strokeDasharray: toggle ? 0 : 8 },
    config: { duration: 500 },
  });

and passing this const to child components, In child component's I'm trying to define its prop type

interface Props {
  type: Metric | undefined;
  animationTracker: {
    cardPositionName: string;
    mouseOver: boolean;
    trialType: number;
  };
  toggle: boolean;
  setToggle: React.Dispatch<React.SetStateAction<boolean>>;
  dashArrayAnimation: any;
}

What will be its prop type?

score 1 · Accepted Answer · answered Oct 03 '22 at 10:37

You should import the SpringValues type from the library. You can then pass an object of values that relate to your from/to values like so:

import { SpringValues } from '@react-spring/web'

interface Props {
  type: Metric | undefined;
  animationTracker: {
    cardPositionName: string;
    mouseOver: boolean;
    trialType: number;
  };
  toggle: boolean;
  setToggle: React.Dispatch<React.SetStateAction<boolean>>;
  dashArrayAnimation: SpringValues<{ strokeDasharray: number }>;
}

What will be prop types of useSpring

1 Answers1