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

1

Hello. I’m looking to use these two libraries in a rescript side project that I’m doing. And I’m wondering how you would guys approach it.

I was thinking, maybe starting to use it in the application by embedding pieces of JS with raw, just to get an idea of how it could work and what I actually want to do before writing any bindings.

Both libraries have a nontrivial api that is very dynamic, as usual.

Once I kind of know what I want, would you just sit down to write bindings for the whole library? Sounds very tedious to me.

Would you look at the .d.ts files? I did and they are a mess to decipher, the docs on the website explain how to use the library so maybe that would be a better place to base the bindings on?

Do you use LLMs to assist with binding creation? Which ones and what do you give them in the prompt?

Bunch of open questions, but I’m interested to know how you would approach this to make it as painless and safe as possible.

2

That seems reasonable, esp. if you’ve not used either/both of them before. There is a degree of headache in embedding the JS, so just don’t postpone writing the bindings to the point where you’re causing yourself needless pain.

The only times I would do that are if I’m planning on publishing the bindings, or if I’m trying to have a deep understanding of the library itself, so probably not.

I usually look at the typescript defs, though it’s also useful to have a scratch project that uses the library, too, in order to see what the types are actually doing once you use the code. Don’t ignore the docs though.

1 Like
3

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"
}
1 Like