Add a modal

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

warning

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.

Making a modal compatible with useModal

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>
  );
};

Register a 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,
    };
  },
};

Open a modal

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>;
};

note

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