Skip to main content

React

Openexus JavaScript/TypeScript support provides the ability to use the React framework within a node. This provides the node with all the power of React, JSX/TSX, and Reactive programming.

In Openexus this may be achieved in one of two ways:

Openexus Helper SDK​

The React Helper SDK provides a means to tell Openexus that you are using React, and a way to interact with Openexus items such as nodes and properties.

To use React and the Openexus Javascript/TypeScript React Helper SDK...

  1. Import Framework and the SDK;
  2. Setup the Helper SDK;
  3. Setup a Renderer.

Once the above steps are satisfied the node is ready to use React and Openexus together. There may be additional things to do to work with Openexus items within React, so make sure to read the Framework Specific Documentation below.

Import Framework and the Helper SDK​

src/main.jsx
import * as reactDom from 'react-dom/client';
import react from 'react';
import { setup } from 'openexus/react';

Setup the Helper SDK​

src/main.jsx
setup(context, react, reactDom);

Setup a Renderer​

A renderer tells a node what base React component to display for the node. Some nodes may not require a renderer, but most do. If you have a View property, or a property that has a datatype of html you will need to setup a renderer for it as shown here.

src/main.jsx
// Create a render function
function SomeComponent() {
  return (
    <p>Hello world!</p>
  );
}

// Set the View property to the Component.
context.set('view', context.render(SomeComponent)); // alt

Example​

Framework Specifics​

Using the React framework with Openexus has some small differences over regular React, especially where one needs to interact with Openexus. These differences are outlined below.

Property References​

In order to use a reference to a Openexus node property, the property must be obtained from Openexus. The Helper SDK provides an easy to use way to do this with context.use(). context.use() takes the name of a specific node property (as defined in your properties.yaml file) and creates a useable reactive signal from it.

Definition:

context.use(<property-name>) => [getter, setter]

Usage:

const [count, setCount] = context.use('count');

Manual Setup​

For more specific control, one may choose to interface with the React library without using the Openexus React Helper SDK.

Render View​

Without using the Openexus React Helper SDK, one must manually createRoot and render on the element when setting up the ((view)) property.

src/main.tsx
import { createRoot } from 'react-dom/client';
import ReactComponent from './ReactComponent.jsx';

context.set('view', (el) => createRoot(el).render(ReactComponent()));

Property References​

Without using the Openexus React Helper SDK, one must manually create ref and setup subscription. This is an example helper function.

src/ReactComponent.tsx
import { useState, useRef, useEffect, createElement } from 'react';

function ReactComponent() {
  const [count, setCount] = useState(context.get('count'));

  useEffect(() => {
    context.subscribe('count', (v) => {
      setCount(v);
    });
  }, []);

  useEffect(() => {
    context.set('count', count)
  }, [count]);

  return (
    <button
      onClick={() => setCount(count + 1)}
      class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
    >
      {`Count is ${count}`}
    </button>
  );
}