Skip to content

Custom Primitive Components

Gökhan Kurt edited this page Apr 6, 2020 · 1 revision

Most of the time, you don't need to create custom primitive components. You can create your own React components on React side using composition. However, creating custom Unity side components is a valid use case for advanced users.

To do this, you can assign delegates to ReactUnityAPI.ComponentCreators dictionary. In fact, all primitive components are created using this dictionary, so you can also override how existing components are created.

An example of creating custom components and overriding existing ones can be seen here. You can download the full sample and navigate to Scenes/CustomComponent scene to see this in action.

custom

Note: The example is a very basic use case and it can be done without using custom components. React composition should be used instead. But for the sake of example we are using custom components.

Typescript definitions

To use the custom component in React without errors and provide strong typing, you can define IntrinsicElements like in the example script. An alternative way is to use value-based elements but that is not recommended as it does not provide strong typing, which can also be seen in the example script. You can read more about this in Typescript guide on JSX.