Using Your Own Modals

How can we use our own modals instead of HAPI Elements ones?

caution

HAPI Elements Modals styling can be customized, please refer to how to adjust theming further section.

We discourage using your own modals, as if we decide to add a new modal to HAPI Elements codebase, then your codebase would not be handling it (unless you add it right after we deploy the changes). The goal of HAPI Elements is to be as "maintenance-free" as possible thus introducing custom behaviours on your application will require you to maintain your code.

Using your own Modals:

Add an event listener to track modal changes:

const callback = (modals) => {
    console.log('[HAPI] modals changed', modals)
}

window.hapi.modal.state.modals.onChange(callback)

The modals received in the callback is an Object with primary and secondary keys. These are "modal zones" so that if needed, a secondary modal can appear on top of a primary modal (modals on top of each other). The primary and secondary will have the Object of Modal assigned. Refer to the Typescript type of the Modal.

The key corresponds to ModalKeys enum.

The props corresponds to props listed in ModalProps type.

The widgets shown in the modals vary; thus you need to check which widget is used to show inside your "modal container" by checking all widgets in each of the module in the Elements tab of the Playground. Alternatively, you can construct your own components without using widgets, and tying in functionality from Services but that would be a huge undertaking, and we don't recommend doing that. In any case, if you want to do that, we, unfortunately, do not (can not due to the nature that the code might change internally) document each of the widget's internals; therefore, you would need to do a bit of investigating by checking which service functions would run by checking the Service tab of the Playground of that particular module.

So you could have some code as such:

const handleModal = (modal) => {
    switch (modal.key) {
        case "layout-wallet-modal": {
            // show your Wallet modal component
            // modal.props is WalletModalProps
            // so you can use this in your modal if needed
            break;
        }
        case "layout-basket-modal": {
            // show your Basket modal component
            // modal.props is BasketModalProps
            // so you can use this in your modal if needed
            break;
        }
        /// ...other cases for other modal keys
    }
}

const callback = (modals) => {
    Object
        .keys(values)
        .forEach(modal => handleModal(modal))
}

window.hapi.modal.state.modals.onChange(callback)