React

Import the Modal component from @tmedxp/react-components.

Properties

ModalProperties extends <PropsWithChildren<Omit<ComponentProps<'dialog'>, 'open'>>>.

Prop	Type	Description	Optional
instance	ModalInstance	The modal instance used to open / close	❌
position	ModalPosition	Position: 'ABSOLUTE' | 'FIXED' | 'RELATIVE'	✅
placement	ModalPlacement	Placement: centered, top, bottom, etc.	✅
labels	ModalLabels	Collection of labels used by the modal	❌
frameContent	React.ReactElement	Content of tng-frame container if framed	✅

Example without frame

import {
  Modal,
  ModalPlacement,
  ModalPosition,
  useModalInstance,
  Button,
} from '@tmedxp/react-components';

const modalInstance = useModalInstance();
const ModalExample = () => {
  return (
    <>
      <Button
        buttonType="button"
        buttonSize="md"
        buttonStyle="primary"
        onClick={modalInstance.open}
        text="Open modal overlay"
      />
      <Modal
        instance={modalInstance}
        position={ModalPosition.ABSOLUTE}
        placement={ModalPlacement.CENTER}
        labels={{ Close: 'Close overlay' }}
      >
        <p class="tng-text-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </Modal>
    </>
  );
};

export { ModalExample };

Example with frame

import {
  Modal,
  ModalPlacement,
  ModalPosition,
  useModalInstance,
  Button,
} from '@tmedxp/react-components';

const modalInstance = useModalInstance();
const frameContent = <div className="tng-slot"></div>;
const ModalExample = () => {
  return (
    <>
      <Button
        buttonType="button"
        buttonSize="md"
        buttonStyle="primary"
        onClick={modalInstance.open}
        text="Open framed modal overlay"
      />
      <Modal
        instance={modalInstance}
        position={ModalPosition.ABSOLUTE}
        placement={ModalPlacement.CENTER}
        labels={{ Close: 'Close overlay' }}
        frameContent={frameContent}
      >
        <p class="tng-text-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </Modal>
    </>
  );
};

export { ModalExample };

useDialog hook

Pairs with Modal to manage open/close state.

Properties

• id — a string referencing the dialog.
• isModal — true to show as a modal.
• onSubmit — invoked when the dialog is closing.

Returned API

• reference — the dialog’s DOM reference.
• properties — the dialog’s properties.
• softClose() — close the dialog.
• openOverlay() — open the dialog.

Example

const dialog = useDialog({
  id: 'overlay',
  isModal: true,
  onSubmit: () => alert('The dialog has been closed'),
});

dialog.openOverlay();

dialog.softClose();