Docs / rescript-react / Extensions of props

You are currently looking at the v0.12.0 docs, which are still a work in progress. If you miss anything, you may find it in the older v0.11.0 docs here.

Extensions of Props

Note: The output shown for the examples on this page assumes your rescript.json to be set to "jsx": { "version": 4, "mode": "classic" }. We will update it for automatic mode soon.

Spread props

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

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

Multiple spreads are not allowed:

<NotAllowed {...props1} {...props2} />

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

<NotAllowed a="a" {...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>
  let make = (~x, ~y) => + y)

This feature can be used when the nominally different components are passed to the prop of Screen component in ReScript React Native Navigation.

type screenProps = { navigation: navigation, route: route } module Screen: { @react.component let make: ( ~name: string, ~component: React.component<screenProps>, ... ) => React.element } <Screen name="SomeScreen" component={A.make} // This will cause a type check error ... /> <Screen name="SomeScreen" component={B.make} // This will cause a type check error ... />

This example cann't pass the type checker, because the props types of both components are nominally different. You can make the both components having the same props type by passing screenProps type as argument to @react.component.

module A = { @react.component(:screenProps) let make = ( ~navigation: navigation, ~route: route ) => ... } module B = { @react.component(:screenProps) let make = ( ~navigation: navigation, ~route: route ) => ... }