Easily restore your project to a previous version with our new Instant One-click Backup Recovery

Hygraph
Docs

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

#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:

nametypedescription
disableOverlayClickboolean (default false)disable closing the modal when clicking outside of it
maxWidthstringset a custom width to the modal
ariaLabelstringmodal 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>
  );
}