Function: showMessage()

function showMessage(ctx: Context, options: ShowMessageOptions): Promise<MessageBubbleReturnValue>;

Defined in: src/message/showMessage.tsx:112

Parameters

Parameter	Type	Description
ctx	Context	Context to render to.
options	ShowMessageOptions	Configuration for the dialog.

Returns

Promise<MessageBubbleReturnValue>

The button that was pressed.

Deprecated

Use showUI.message instead.

Render a dialog with a text message.

Display a bubble with a text message, header, and navigation buttons. Wait until the user clicks one of the buttons.

Common uses for this dialog:

• Display the results of an action.
• Explain what will happen in the next step.
• Ask users to perform actions, and resume once they are done.

Remarks

• To prevent background interaction, use overlay.
• To blur the background, use blur and blurIntensity.
• The text is parsed as Markdown, but you can also pass ReactNodes.

Import BackgroundReact when passing ReactNodes.

 import {BackgroundReact as React} from '@matterway/background-react';

You can specify any number of buttons. The "main" action should be last. By default, the dialog shows a single Proceed button with value ok.

Resolve when the user clicks a button, returning its value.

Examples

const {button} = await showMessage(ctx, {
  title: 'My first step',
  description: 'It performs actions',
  text: 'Actually, how about this time **you** perform an action',
});

const {button} = await showMessage(ctx, {
  title: 'My second step',
  description: 'It does perform actions this time',
  text: (<div>Just kidding. Do what is written at this <a>link</a></div>),
  buttons: [
    {text: 'Close', value: 'cancel'},
    {text: 'Proceed', value: 'ok'},
  ],
  overlay: true,
  overlayProps: {
    blur: true,
    blurIntensity: 2,
    background: 'grey',
  }
});