ModalLauncher

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

Import

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

Examples

ModalLauncher is convenient because you can return results from modal interations as a Javascript promise.

Open in Playground
function ModalLauncherExample() {
  const [result, setResult] = useState('');

  const onClickHandler = () => {
    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) => {
      setResult(text);
    });
  };

  return (
    <Stack flexDirection="row">
      <Button onClick={onClickHandler}>Open a modal</Button>
      {result && (
        <Text>
          Result is <strong>{result}</strong>
        </Text>
      )}
    </Stack>
  );
}
function ModalLauncherExample() {
  const [result, setResult] = useState('');

  const onClickHandler = () => {
    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) => {
      setResult(text);
    });
  };

  return (
    <Stack flexDirection="row">
      <Button onClick={onClickHandler}>Open a modal</Button>
      {result && (
        <Text>
          Result is <strong>{result}</strong>
        </Text>
      )}
    </Stack>
  );
}
Hide source