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