Create a popup

The recommended way to add a popup or modal to your application is to use the Ant Design Modal component.

In some situations, using this component will not work. This happens in particular when the modal is opened from a submenu item. You can fix this issue by using the useModal hook.

The `useModal` hook

To use this hook, you must:

Make your modal compatible with it.
Register your modal.
Open the modal using the hook.

Assuming you have a component named MyModal, that renders your modal:

import { Modal } from "antd";
import { FC, useState } from "react";

const MyModal: FC<MyModalProps> = (props) => {
  const [open, setOpen] = useState(true);

  return (
    <Modal
      open={open}
      onOk={() => setOpen(false)}
      onCancel={() => setOpen(false)}
    >
      ...
    </Modal>
  );
};

To make it compatible with useModal, apply these changes:

import { Modal } from "antd";
import { FC, useState } from "react";

import { useModal } from "@activeviam/atoti-ui-sdk";

const MyModal: FC<MyModalProps> = (props) => {
  const [open, setOpen] = useState(true);
  // The `closeModal` function unmounts the modal.
  const { closeModal } = useModal();

  return (
    <Modal
      open={open}
      onOk={() => setOpen(false)}
      onCancel={() => setOpen(false)}
      // Unmount the modal after the closing animation.
      afterOpenChange={(isOpen) => {
        if (!isOpen) {
          closeModal();
        }
      }}
    >
      ...
    </Modal>
  );
};

After you’ve made your modal compatible with useModal, register it in the extension’s Configuration in your index.ts:

const extension: ExtensionModule = {
  activate: async (configuration) => {
    configuration.modals = {
      ...configuration.modals,
      "my-modal": MyModal,
    };
  },
};

Once your modal is compatible with useModal and it is registered, you can open it as follows:

import { useModal } from "@activeviam/atoti-ui-sdk";

const Component = () => {
  const { openModal } = useModal();

  const handleOnClick = () => {
    openModal<MyModalProps>("my-modal", props);
  };

  return <button onClick={handleOnClick}>Click me to open a modal</button>;
};

Notice how you can pass initial props to your modal component and define its props interface using TypeScript.

Introduction

Releases and Upgrades

User guide

Developer guide

The `useModal` hook

​The useModal hook

​Making a modal compatible with useModal

​Register a modal

​Open a modal

The `useModal` hook

Making a modal compatible with `useModal`

Register a modal

Open a modal