Components

Component structure

Example of a Hello World Component - View the Code

• HelloWorld.tsx
• HelloWorld.config.json
• HelloWorld.md
• HelloWorld.css

HelloWorld.tsx

This is where your js code goes. You can use any library you want, like React, Vue, Angular, Svelte, etc. Your component needs to be able to render using a html custom element.

Example:

if (!window.customElements.get('react-hello-world')) {
    customElements.define(
        'react-hello-world',
        r2wc(ReactHelloWorld, {
            props: {
                title: 'string',
                subtitle: 'string',
            },
        }),
    );
}

Full code

HelloWorld.config.json

Json file with the configuration of your component.

You can define the properties of your component here.

• Version
• Dialog

{
  "version": "1.0.9",
  "dialog": [
    {
      "type": "textfield",
      "name": "title",
      "id": "title",
      "label": "Title",
      "placeholder": "Title"
    },
    {
      "type": "textfield",
      "name": "subtitle",
      "id": "subtitle",
      "label": "Sub Title",
      "placeholder": "Sub Title"
    }
  ]
}

Full code

HelloWorld.css

Css file for your component.

HelloWorld.md

Read me file for your component this will be shown in the dashboard.

Component Nesting

Components can be nested within other nexus components. When a component is rendered as a child, it automatically receives the data-nexus-child attribute, which is passed to your React component as the dataNexusChild prop.

This allows child components to detect their nesting context and adjust their behavior accordingly.

For detailed information on component nesting and the data-nexus-child attribute, see Component Nesting.