javascriptcsstypescriptreact-spring

What will be prop types of useSpring


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?


Solution

  • 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 }>;
    }