Create a Visual node with React

Noodl is built with React which makes it easy for you to add custom or community React components to your workspace. This guide will help you create a React library from scratch and push it to your Noodl workspace.

Setup

In order to complete this guide you must install the Noodl CLI and learn how to push the module to your workspace. Please review this guide first.

With the CLI tool you can easily create a new react library module from a template:

noodl-cli new react-lib ./my-react-lib

You need to specify a directory name that will be created. The directory will contain everything you need to get started. Using the command above, the directory my-react-lib will be created.

The newly created directory has the following structure:

my-react-lib/
    module/
    project/
    tests/
    icon.png
    module.json

Just like in the introductory guide the folder contains the project and tests subfolders that you may to import into Noodl. Especially the tests folder is a good place to play around with your library and create tests to make sure the component is working as expected.

note

It is important that you do not change the name of the project and tests folders. The build scripts in the module folder is dependent on these names or it will not build the module properly and you cannot push to your workspace.

A tour of the code

Now you have created a new React library module from the template and you have pushed it to your Noodl workspace. Let's review the code a bit to get you up and running.

The react code can be found in the module directory.

my-react-lib/
    module/
        src/
            index.js
        assets/
            manifest.json
        package.json
        webpack.config.js
    project/
        ...

Open index.js in your favorite editor. This file contains a simple React component and its export to Noodl. Each component that you want to be exposed in Noodl as a visual component, must be exported.

First a simple React component:

function MyCustomReactComponent(props) {
    const style = {
        color: props.textColor,
        backgroundColor: props.backgroundColor,
        borderRadius: '10px',
        padding: '20px',
        marginBottom: props.marginBottom,
    }

    return (
        <div style={style} onClick={props.onClick}>
            {props.children}
        </div>
    )
}

Next the export of the component to Noodl:

const MyCustomReactComponentNode = Noodl.defineReactNode({
    name: 'Custom React Component',
    category: 'Tutorial',
    getReactComponent() {
        return MyCustomReactComponent
    },
    inputProps: {
        backgroundColor: { type: 'color', default: 'white' },
        marginBottom: {
            type: { name: 'number', units: ['px'], defaultUnit: 'px' },
            default: 10,
        },
    },
    outputProps: {
        onClick: { type: 'signal', displayName: 'Click' },
    },
})

In addition to how you would specify a simple Noodl node, as in the introductory guide, you must provide the getReactComponent function that retuns the React component. You may also specify inputProps and outputProps that map to the properties of the React node and will become inputs and outputs of your Noodl node.

Outputs in React are typically done via callbacks. You can capture these callbacks and deliver them as outputs in Noodl.

Finally the component is provided as part of your module declaration. Here you need to put it under the reactNodes section to make sure Noodl recognises it as a visual node.

Noodl.defineModule({
    reactNodes: [MyCustomReactComponentNode],
    nodes: [],
    setup() {
        //this is called once on startup
    },
})