Skip to main content

Modals

There is currently a hook called useModal that we use to open modals in many places. This hook has been deprecated. Please use the openModal function in LayerConext as described in this article.

Example Usage
const { openModal } = useLayerContext();
openModal((closeModalFn) => 
  <ConfirmClearLogsModal ctas={getConfirmationCtas(closeModalFn)} text={t(SystemLogsTKeys.ClearLogsConfirmMsg, { count: systemLogs.length })} />);

The useLayerContext hook has a function called openModal that can be used to open a modal from anywhere. It is a function whose single parameter is a function called getModalComponent that should return the modal to be displayed as JSX. The modal should be styled in such a way that it will appear as a popup over all the other UI (such as by using EfcModal from the component library). The closeModalFn parameter passed to the getModalComponent function will close the modal when called.

Just as a heads up, ifIf your modal is dependent on data from a context, be sure to wrap your modal in the openModal call in that context.

openModal((closeModal) => {
    return (
        <NodeDetailsProvider>
            <EditAccessLinkModal destroyModal={closeModal} accessLink={item as IAccessLink} />
        </NodeDetailsProvider>
    );
}

When using EfcModal you will probably want to set the isOpen prop to true, and have the toggle prop call closeModalFn.

Back to top