Render a JSON component in React

The UI Framework lets you create reusable UI component instances using either JSON or React.

Define JSON components in {package}/ui/c3/meta/**/{componentId}.json.

Define TSX components in {package}/ui/c3/src/customInstances/{componentId}.tsx.

Once you define a component instance, the system assigns its component ID based on the filename. You can nest one component inside another—regardless of whether the source is JSON or TSX—by referencing that ID.

To embed a component instance in a JSON component, set the componentRef field to the target component’s ID.

To embed a component instance in a TSX component, import it from @c3/ui/components/{componentId}.

This topic explains how to render a component instance in React and how to reuse that instance inside another JSON component.

Copy link to this section

Render a JSON-defined component in React

This instance displays a paginated data grid of WindTurbine entities using a server function.

// {package}/ui/c3/meta/WindDemo.Grid.json
{
  "id": "WindDemo.Grid",
  "type": "UiSdlConnected<UiSdlDataGrid>",
  "component": {
    "paginationConfig": {
      "pagination": true,
      "pageSize": 20
    },
    "selectableRows": true,
    "dataSpec": {
      "dataType": "WindTurbine",
      "columnFields": [
        {
          "fieldName": "serialNumber",
          "label": "Serial Number",
          "searchable": true,
          "sortable": true
        },
        {
          "fieldName": "manufacturer",
          "label": "Manufacturer",
          "searchable": true,
          "sortable": true
        },
        {
          "fieldName": "location",
          "label": "Location",
          "searchable": true,
          "sortable": true
        }
      ]
    }
  }
}

To render this instance in a TSX component, import it by its component ID and embed it in the TSX:

// {package}/src/ui/c3/src/customInstances/{componentId}.DemoPage.tsx

import React from 'react';
import WindDemoGrid from '@c3/ui/components/WindDemo.Grid';

export default function DemoPage() {
  return (
    <div>
      <h2>Wind Turbine Dashboard</h2>
      <WindDemoGrid />
    </div>
  );
}

The framework treats this component as a fully resolved instance. You cannot pass props to it. The original JSON declaration fully defines its structure and behavior.

This pattern also applies to TSX-defined instances. As long as the instance lives in customInstances, the framework treats it as a reusable component.

Copy link to this section

Reuse a component instance using componentRef in JSON

You can embed a component instance inside another JSON-defined component by using the componentRef field. Set this field to the ID of the child component you want to include.

For example, to embed the WindDemo.Grid instance inside another JSON layout:

{
  "type": "UiSdlConnected<UiSdlGridLayout>",
  "component": {
    "navMenu": {
      "id": "demos.NavMenu"
    },
    "gridStyle": "FLUID",
    "gutter": 5,
    "display": "VERTICAL",
    "children": [
      {
        "type": "UiSdlGridContainer",
        "children": [
          "WindDemo.Grid"
        ]
      }
    ]
  }
}

This layout uses UiSdlGridLayout to contain and display the reusable data grid. Use this approach to create modular layouts and compose components across TSX and JSON without duplicating logic.