How to bind an imported object of React components?

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 = {
  @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'


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";

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.