[typescript] How to type poor component with animated.div inside?

[gormonn]

Hey!
Please tell me how to type a wrapper component with typescript?

For example:

export const SpaceItemMark = (props) => (
  <animated.div
    sx={{
      display: 'flex',
      height: 52,
      width: 52,
      alignItems: 'center',
      justifyContent: 'flex-end',
      position: 'absolute',
      right: 24,
    }}
    {...props}
  >
    <SvgIconSelectedProperty116X16 />
  </animated.div>
);

[joshuaellis]

You can either use SpringValue or what I would probably use is SpringValues. I'm not familiar with what library you're using to enable the sx prop but beside that this is how I would approach it

type SpaceItemMarkProps = {
  springs: SpringValues<{
    opacity: number
  }>
}

export const SpaceItemMark = ({springs}: SpaceItemMarkProps) => (
  <animated.div
    sx={{
      display: 'flex',
      height: 52,
      width: 52,
      alignItems: 'center',
      justifyContent: 'flex-end',
      position: 'absolute',
      right: 24,
    }}
    style={
      springs
    }
  >
    <SvgIconSelectedProperty116X16 />
  </animated.div>
);

const App = () => {
  const springs = useSpring({
    opacity: 1
  })

  return <SpaceItemMark springs={springs} />
}