Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
Basic
StoreWidgetsData BindingControllersInner LayoutsCSSFormattingSelection
Basic
Data Views
RepeaterRescopeSandboxData ProxyPrivate Store
Data Views
Advanced
RouterOuter LayoutsFunctional ComponentsLocalizationChartsDrag & DropData AdaptersKeyboard ShortcutsTyped ModelsImmer.js IntegrationCreating ComponentsCx Component
Advanced
Report Edit

Functional Components

CxJS offers functional components, similar to React. Functional components provide a simple way to create structures composed out of several CxJS components.

In the following example, a new functional component is defined and then used to create multiple flavors of the same chart.

0255075100050100
025507510020406080
025507510020406080
ComponentIndex
<div class="widgets">
    <LineChart
        chartStyle="width: 300px; height: 200px; background: white;"
        lineStyle="stroke: red"
        data={Array.from({length: 100}, (_, x) => ({ x, y: 75 - 50 * Math.random() }))}
    />

    <LineChart
        chartStyle="width: 300px; height: 200px; background: black"
        lineStyle="stroke: green; stroke-width: 1"
        data={Array.from({length: 100}, (_, x) => ({ x, y: 75 - 50 * Math.random() }))}
    />

    <LineChart
        chartStyle="width: 300px; height: 200px; background: blue"
        lineStyle="stroke: white; stroke-width: 2"
        data={Array.from({length: 100}, (_, x) => ({ x, y: 75 - 50 * Math.random() }))}
    />
</div>
Copied!Cx Fiddle

Complex Functional Components

import {createFunctionalComponent} from 'cx/ui';

If functional components contain additional logic, it's required to wrap them inside a createFunctionalComponent call.

ComponentWidget
<div class="widgets">
    <MyForm />
    <MyForm vertical />
</div>
Copied!

Note that React (functional) components can freely be mixed with CxJS, therefore, createFunctionalComponent is required when a CxJS functional component doesn't have a recognizable syntax.

Reserved property names

A number of properties that can be passed to functional components are important for the internal workings of the Cx framework. They ensure functional components work well with other Cx widgets, and should not be used within the function body.

PropertyDescriptionType
controller

Controller passed to a functional component will automatically be initialized, as with any other component.

controller
layout

Defines the inner layout that will be applied to child elements.

widget
outerLayout

Defines the outer layout which wraps the functional component.

widget
visible
if

If visible is set to false, the function defining the functional component will not be executed, nor its controller will be initialized. For this reason, another name should be used if child elements depend on its value.

boolean