@hmiproject/helio-sdk
    Preparing search index...

    Function createElement

    • Creates a HELIO element.

      Note: New elements need to be added to the extension's library (see createLibraryExtension) to become active in HELIO.

      Type Parameters

      Parameters

      • namespace: Namespace

        Namespace for uniquely addressing this element.

        createNamespace

      • options: {
            category?: string;
            Component: ComponentType<Values<Schema["current"]>>;
            defaultProps?: DefaultElementPropsCallback<Schema>;
            description: string;
            icon?: IconRef;
            id?: string;
            name: string;
            propsGroups?: Record<string, PropsCategory>;
            propsSchema: Schema;
            texts?: CreateTextsResult<TextsDef>;
            traits: (string | TraitRef)[];
        }
        • Optionalcategory?: string

          Optional category for grouping this element in the HELIO IDE, such as in the Add Element dialog.

        • Component: ComponentType<Values<Schema["current"]>>

          React component used to display this element.

        • OptionaldefaultProps?: DefaultElementPropsCallback<Schema>

          Optional callback for creating default props.

          Can be used to instantiate other elements as children.

        • description: string

          Description of this element that will appear in the IDE.

        • Optionalicon?: IconRef

          Optional icon to identify this element in the HELIO IDE

          { name: 'Dinosaur' }
        • Optionalid?: string

          Internal ID of the element. This uniquely identifies the element within the extension and should never change. If this property is omitted, the element will be referenced by its name.

        • name: string

          Human-readable name of the element as it will appear in the HELIO IDE.

          Note: If no explicit id is provided, this value will also be used to create a unique id for the element.

          Changing the name in an extension update will break element references in existing projects.

          If you need to change the name, make sure to provide an id with the old name to ensure a smooth migration.

          Migrating element name.

          {
            name: 'New Element Name',
            id: 'Old Element Name',
            // ...other `createElement` options...
          }
        • OptionalpropsGroups?: Record<string, PropsCategory>

          Optional configuration to group entries in propsSchema into different property groups in the IDE.

          Panel

        • propsSchema: Schema

          Schema containing the properties this element accepts, created using the createPropsSchema function.

        • Optionaltexts?: CreateTextsResult<TextsDef>

          Translation texts used in this element

          createTexts

        • traits: (string | TraitRef)[]

          Element traits

          Traits control where an element can be used in the application and what properties it has. HELIO provides some standard traits that allow your elements to extend different parts of the library.

      Returns CreateElementResult<Schema>

      1.0.0

      Create a new element

      const ns = createNamespace({ name: 'com.my-company' });
      const element = createElement(ns, {
        name: 'My Control',
        description: 'Allows controlling Retro Encabulators',
        traits: [traits.Control],
        propsSchema: createPropsSchema().initial({}),
        Component() {
          return <div>My Control</div>;
        },
      });

      createNamespace

    Settings

    Member Visibility