Extensions of Props

Note: This page assumes your bsconfig.json to be set to "jsx": { "version": 4 } to apply the right JSX transformations.

Spread props

JSX props spread is supported now, but in a stricter way than in JS.

<Comp {...props} a="a" />

Multiple spreads are not allowed:

The spread must be at the first position, followed by other props:

Shared props

You can control the definition of the props type by passing as argument to @react.component the body of the type definition of props. The main application is sharing a single type definition across several components. Here are a few examples:

type sharedprops<'x, 'y> = {x: 'x, y: 'y, z:string}

module C1 = {
  @react.component(:sharedProps<'a, 'b>)
  let make = (~x, ~y) => React.string(x ++ y ++ z)
}

module C2 = {
  @react.component(:sharedProps<string, 'b>)
  let make = (~x, ~y) => React.string(x ++ y ++ z)
}

module C3 = {
  type myProps = sharedProps<int, int>
  @react.component(:myProps)
  let make = (~x, ~y) => React.int(x + y)
}