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.