Function modal

Creates a modal component that serves as the main container for UI elements. The modal is typically used as the root container when displaying UI through showUI.

Param: optionsOrContent

Either the content to display or the options object

Param: options

Configuration object

Param: options.title

Header title text

Param: options.description

Header description text

Param: options.icon

Icon element to display that can be a string or a React node

Param: options.image

URL of the image to display

Param: content

The content to display (only used when options are provided)

Returns

A JSX element representing the modal component

Example

Basic usage with content

modal([
  headerBar({
    title: 'Welcome to the Matterway SDK',
    description: 'This is a sample welcome message.',
  }),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Jane',
    }),
  ]),
]);

Example

Usage with options and content

modal(
  {
    title: 'Welcome to the Matterway SDK',
    description: 'This is a sample welcome message.',
  },
  [
    group([
      inputField({
        name: 'email',
        label: 'Email',
        type: 'email',
      }),
    ]),
  ]
);

Settings