ModalLauncher

StorybookGithub

stable

ModalLauncher is a utility that allows calling Modal and ModalConfirm in an imperative code, in functions.

How to use ModalLauncher

Import

import { ModalLauncher } from '@contentful/f36-components';
// or
import { ModalLauncher } from '@contentful/f36-modal';

Code examples

Open in Playground
function ModalLauncherExample() {
  return (
    <React.Fragment>
      <Button
        onClick={() => {
          ModalLauncher.open(({ isShown, onClose }) => (
            <ModalConfirm
              isShown={isShown}
              onCancel={() => {
                onClose('canceled');
              }}
              onConfirm={() => {
                onClose('confirmed');
              }}
            >
              <Text>Do you want to confirm your action?</Text>
            </ModalConfirm>
          )).then((text) => {
            window.alert(text);
          });
        }}
      >
        Trigger ModalLauncher
      </Button>
    </React.Fragment>
  );
}
function ModalLauncherExample() {
  return (
    <React.Fragment>
      <Button
        onClick={() => {
          ModalLauncher.open(({ isShown, onClose }) => (
            <ModalConfirm
              isShown={isShown}
              onCancel={() => {
                onClose('canceled');
              }}
              onConfirm={() => {
                onClose('confirmed');
              }}
            >
              <Text>Do you want to confirm your action?</Text>
            </ModalConfirm>
          )).then((text) => {
            window.alert(text);
          });
        }}
      >
        Trigger ModalLauncher
      </Button>
    </React.Fragment>
  );
}
Hide source