How to bind an imported object of React components?

, ,
1

I’m trying to write bindings for framer-motion, which offers a lot of components namespaced under motion: motion.div, motion.span etc. In javascript you would use these as:

import { motion } from 'framer-motion'

function UsingMotion () {
  return <motion.div ... />
}

If motion contained ordinary functions I could have done something like:

type t = {
  div: (~children: React.element) => React.element
}

@module("framer-motion") external motion: t = "motion"

…but the fact that React components need to be modules is throwing me.

I have tried:

module Div = {
  @react.component
  @module("framer-motion") external make: (~children: React.element) => React.element = "motion.div"
}

but of course that results in something like:

import * as motion from 'framer-motion'

motion['motion.div']
2

You can use @scope() to bind nested properties

module Div2 = {
  @react.component @module("framer-motion") @scope("motion") 
  external make: (~children: React.element) => React.element = "div"
}

This results in:

import * as FramerMotion from "framer-motion";
FramerMotion.motion.div
3 Likes
3

Right, thanks! I remember seeing @scope in the docs for binding to global values. I wasn’t sure it would also work here, though I suppose I should’ve tried.