First Widget

A widget is a simple react component that is rendered on the dashboard. The dashboard already renders it at the correct position with the correct size as configured.

mobro-widget-config.json

Every widget needs a special configuration file, in order for MoBro to detect it as a widget. This is the mobro-widget-config.json file. For more details see In depth: Widget Pack Config

So let's create our first widget which will be able to display text and give the user the possibility to align it how he wants.

First step is to create the mobro-widget-config.json

src/widgets/text/mobro-widget-config.json

{
  "name": "text",
  "displayName": "Text",
  "filename": "Text.tsx"
}

This is the most basic configuration necessary. The name is the unique id for the widget within the widget pack. The filename should point relative to the actual typescript file which will implement the React component. So let's create this file next

src/widgets/text/Text.tsx

import React from 'react';

export default function Text() {
    return <h1>Text</h1>
}

With that the widget is ready to be used in the dashboard builder and we can simply add it to a dashboard and should see a the h1 tag with the content "Text".

caution

It is crucial to export the components which should represent the widget as default.