The defineComponent function takes the following parameters:

• component is a standard react component (the one that will be rendered to the canvas.
• meta tells Embeddable’s no-code builder which inputs to present to the user when they are adding / editing this component.
• config tells Embeddable’s SDK how to map the inputs provided by the user to the props required by the react component.

Meta is defined as follows:

• name should be a unique name that defines this component. Behind the scenes, Embeddable uses this name to save metadata against this name whenever this component is used on a dashboard. Try not to change this name once this component is in use. This name must match the name of the .emb.ts file that it is in.
• label this is the human readable name that appears inside the no-code builder to represent this component. No problem changing this name later.
• classNames is a list of css class names to add to the parent container of this component. This is useful if you want to style a component’s parent, e.g. to add a border around your component, or to affect the overflow css property, etc.. Each component in Embeddable sits inside its own shadow DOM, so to reference them in your css, use :host for example like this: :host(.overflow-scroll) { overflow: scroll; } with classNames: ['overflow-scroll'] in your component.
• inputs are a list of inputs that you want the user of your component (in the no-code builder) to provide. These could be text values, number, as well as datasets and dimensions and measures.
• events tells Embeddable that your component fires events (like onChange, onClick, onSpinAroundInACircle, etc.) and that when using the component, you can define interactions, such as setting a variable, when such an event is fired (learn more).
• variables tells Embeddable that when your component is added to the canvas, Embeddable should also create a new variable automatically, and hook it up to this component (e.g. as an input for one of the inputs or to be set when a particular event is fired.
• defaultWidth and defaultHeight are the width and height in pixels that you want your component to take up when initially added to the canvas. The canvas uses a 12 column grid, so the component will snap to the grid, so it usually won’t match these pixel values exactly, but Embeddable will simply round up to be as close as possible. Your component will also grow and shrink as the canvas grows and shrinks (with browser width).

Example

An example component that uses most of the options available in Meta is a dropdown component (see full code here):

import { defineComponent, EmbeddedComponentMeta } from '@embeddable.com/react';
import { loadData, Value } from '@embeddable.com/core';

import Component from './index';

export const meta: EmbeddedComponentMeta = {
  name: 'BasicDropdownComponent',
  label: 'Basic Dropdown',
	classNames: ['add-border'],
	defaultWidth: 320,
  defaultHeight: 80,
  inputs: [
    {
      name: 'title',
      type: 'string',
      label: 'Title',
      description: 'The text to show next to the dropdown',
			defaultValue: 'My title',
    },
    {
      name: "ds",
      type: "dataset",
      label: "Dataset to display",
    },
    {
      name: "values",
      type: "dimension",
      label: "Values",
      config: {
        dataset: "ds",
      },
    },
    {
      name: 'defaultValue',
      type: 'string',
      label: 'Default value',
      description: 'The initial value'
    },
    
  ],
  events: [
    {
      name: 'onChange',
      label: 'Change',
      properties: [
        {
          name: 'value',
          type: 'string'
        }
      ]
    }],
  variables: [
    {
      name: 'chosen value',
      type: 'string',
      defaultValue: Value.noFilter(),
      inputs: ['defaultValue'],
      events: [{ name: 'onChange', property: 'value'}]
    }
  ]
};

type Inputs = {
  title: string;
  ds: Dataset;
  values: Dimension;
  defaultValue: string;
}

export default defineComponent<Inputs>(Component, meta, {
  props: (inputs) => {
    return {
      ...inputs,
      results: loadData({
        from: inputs.ds,
        dimensions: [inputs.values],
      })
    };
  },
  events: {
    onChange: (value) => ({ value: value || Value.noFilter() })
  }
});