Using react-spring and use-gesture, how would you approach it?

If I am not sure if I want to use something I’ll make a JS file that imports it and then write bindings for that file.

For example, let’s say I wanted to wrap some children in a react springs component.

// component.mjs
import { useSpring, animated } from '@react-spring/web'

export default function MyComponent({ children }) {
  const [springs, api] = useSpring(() => ({
    from: { x: 0 },
  }))

  const handleClick = () => {
    api.start({
      from: {
        x: 0,
      },
      to: {
        x: 100,
      },
    })
  }

  return (
    <animated.div
      onClick={handleClick}
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        ...springs,
      }}
    >{children}</animated.div>
  )
}

// binding.res
module MyComponent = {
  @react.compoment @module("./component.mjs")
  external make: (~children: React.element) => React.element = "default"
}