Colon type in @react.component external import

as @xfcw explained, the “colon type” syntax allows to use a predefined type for the props type of a react component instead of using the labeled argument syntax.

Do note though that this syntax works both for external and let bindings and labeled arguments also work for externals.

This allows you to reuse the same type in multiple places of your code, for example if you receive the props of your component from a function, you can then directly destructure them:

module Confetti = {
  type confettiProps = {
    width: int,
    height: int,
  }

  @module("react-confetti") @react.component(: confettiProps)
  external make: confettiProps => React.element = "default"
}

let getConfettiProps = () => {Confetti.width: 300, height: 300}

@react.component
let make = () => {
  <Confetti {...getConfettiProps()} />
}