Dialogs

UI extensions can render pages inside of a native Hygraph dialog, or modal, via the openDialog method.

Values can be sent to the dialog when opening it, and the dialog can return values to the main extension when closing using the onCloseDialog method.

#Example

Native JS

React

#Options

In addition to the values you may want to send to the dialog, the second parameter of openDialog(url, options) can take the following options:

name	type	description
`disableOverlayClick`	`boolean` (default `false`)	disable closing the modal when clicking outside of it
`maxWidth`	`string`	set a custom width to the modal
`ariaLabel`	`string`	modal title for assisitive devices or voice-over

#Typescript

By default dialog options and return types are of type any, but you can narrow down dialog types:

// declare your dialog options and return types
type DialogProps = { question: string };
type DialogReturn = string;

function Button() {
  const { openDialog } = useUiExtension();

  const handleOpenDialog = () =>
    openDialog<DialogReturn, DialogProps>(
      'dialog',
      { question: 'what ?' } // vlidated by typescript
    ).then((answer) => {
      // `answer` is of type `string` instead of `any`
    });
  return <button onClick={handleOpenDialog}>Open question</button>;
}

function Dialog() {
  const { onCloseDialog, question } = useUiExtensionDialog<
    DialogReturn,
    DialogProps
  >();
  const [answer, setAnswer] = React.useState<DialogReturn>('');
  const onCancel = () => onCloseDialog(null);
  const onSubmit = () => onCloseDialog(answer);
  return (
    <div>
      <h2>{question}</h2>
      <input onChange={(e) => setAnswer(e.target.value)} value={answer} />
      <button onClick={onCancel}>Cancel</button>
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}