Mix JSON and React in the Same Layout
The UI Framework lets developers compose JSON component instances and React components in the same layout. Developers define structure and configuration in JSON using UiSdlConnected, and add dynamic behavior through React components referenced in customInstances.
Use JSON to build layouts quickly. Use React to handle interactivity and custom logic.
Page layout
This example demonstrates a page composed of one JSON component and one React component. Both are rendered inside a UiSdlGridLayout.
The page uses UiSdlConnected<UiSdlGridLayout>, a declarative grid layout component, to arrange its children. It wraps one child component defined in JSON and another in React.
// ui/c3/meta/ExamplePackage.MixedLayoutPage.json
{
"type": "UiSdlConnected<UiSdlGridLayout>",
"component": {
"gridStyle": "FLUID",
"gutter": 12,
"display": "VERTICAL",
"children": [
{
"type": "UiSdlGridContainer",
"column": 12,
"display": "HORIZONTAL",
"children": [
{
"type": "UiSdlComponentContainer",
"column": 6,
"childComponent": {
"id": "ExamplePackage.JsonComponentGrid"
}
},
{
"type": "UiSdlComponentContainer",
"column": 6,
"childComponent": {
"id": "ExamplePackage.ReactStatusPanel"
}
}
]
}
]
}
}UiSdlGridLayoutdefines a top-level layout that fills the screen.UiSdlGridContainerarranges its children horizontally in a 12-column layout.- Each UiSdlComponentContainer declares a single
childComponent. - The left column references a JSON component instance.
- The right column references a React component instance created in
customInstances.
JSON child component
This component renders a styled grid static content. It demonstrates a reusable building block for dashboards.
// ui/c3/meta/ExamplePackage.JsonComponentGrid.json
{
"type" : "UiSdlConnected<UiSdlDataGrid>",
"component" : {
"paginationConfig": {
"pagination": false,
"pageSize": 20
},
"dataSpec" : {
"dataType" : "WindTurbine",
"actionArgs": {
"spec": {
"filter": "serialNumber == 0"
}
},
"columnFields": [
{
"fieldName" : "serialNumber",
"label" : "Serial Number"
},
{
"fieldName" : "location",
"label" : "Location"
},
{
"fieldName" : "manufacturer",
"label" : "Manufacturer"
}
]
}
}
}This JSON component is simple, declarative, and easily reconfigurable.
React child component
The React-defined component uses internal state and effects to simulate a live status feed. It is exported from customInstances and referenced by ID.
// ui/c3/src/customInstances/ExamplePackage.ReactStatusPanel.tsx
import React from 'react';
/**
* ReactStatusPanel renders a live-updating status message.
* This component simulates backend updates using internal state.
*/
const ReactStatusPanel = () => {
const [status, setStatus] = React.useState('Checking system...');
// Simulate polling backend data every few seconds
React.useEffect(() => {
const interval = setInterval(() => {
const messages = [
'All services operational.',
'Minor delays detected in queue processor.',
'Database replication completed.',
'No anomalies found.'
];
const next = messages[Math.floor(Math.random() * messages.length)];
setStatus(next);
}, 3000);
return () => clearInterval(interval);
}, []);
return (
<div style={{
backgroundColor: '#f0f4f8',
padding: '16px',
borderRadius: '8px',
border: '1px solid #ccc',
fontFamily: 'sans-serif'
}}>
<h3 style={{ marginTop: 0 }}>Live System Status</h3>
<p>{status}</p>
</div>
);
};
export default ReactStatusPanel;- The component manages local state with
useState. - A timer updates the status message every 3 seconds to simulate backend changes.
- The layout and styles follow the UI Framework's visual conventions (padded containers, soft borders).
- This component can be imported using:
import { ReactStatusPanel } from '@c3/ui/components/ExamplePackage.ReactStatusPanel';Once placed in customInstances, it becomes available to any layout that accepts childComponent.id.