Cx Component

Prerequisite: Widgets

The Cx component is a React component designed to integrate CxJS widgets into React applications. It acts as a mediator between React and CxJS.

ReactApp.js

let store = new Store();
...
// React
<div>
    <Cx store={store} subscribe>
        // CxJS widgets
        <TextField value-bind="name" />
    </Cx>
    // React again
    <button
        onClick={(e) => {
            alert("Hello " + store.get("name"));
        }}
    >
        Say Hello
    </button>
</div>

Copied!

Injecting CxJS into React

Since the Cx component contains mechanisms needed for rendering CxJS widgets, we can use e.g. Button or Grid in our React applications.

Create a new Store or use an existing one.
Within the Cx component, we can use any CxJS widget.
Access or manipulate data in the store to communicate with the CxJS widgets.

Configuration

Property	Description	Type
instance	Instance of the widget.	Instance
options	An object that defines additional options for the `Cx` component.	any
parentInstance	Instance of the parent.	Instance
store	A `Store` object.	object
subscribe	Enable store update subscription by setting to `true`.	boolean
widget	A widget that we want to render.	any
deferredUntilIdle	Improves performance by deferring the render until the browser is idle.	boolean
idleTimeout	Time limit in milliseconds a browser can defer the render for.	number
immediate	Set to `true` to enable batching of updates.	boolean
onError	A callback function used to define actions when an error ocurrs. Takes `error`, `instance`, and `info` as arguments.	function

Documentation

Cx Component