How to catch the hide event of a drawer in Metronic 8 React theme?

Question

Currently, I purchased the Metronic 8 theme and use the demo1 React theme of it on my React project. I created a Drawer and want to run some functions in hide event of that drawer.

The id of that drawer is "kt_drawer_notification" and was defined as follows:

        <div
            id='kt_drawer_notification'
            className='bg-white'
            data-kt-drawer='true'
            data-kt-drawer-name='notification'
            data-kt-drawer-activate='true'
            data-kt-drawer-overlay='true'
            data-kt-drawer-width="{default:'100%', 'sm': '403px'}"
            data-kt-drawer-direction='end'
            data-kt-drawer-toggle='#kt_drawer_notification_toggle'
            data-kt-drawer-close='#kt_drawer_notification_close'
        >
            ...
        </div>

Please share your method for the hide event of a drawer.

score 1 · Accepted Answer · answered Oct 31 '22 at 09:57

Here is my solution:

import { DrawerComponent } from './src/_metronic/assets/ts/components';
  ...
  ...
useEffect(() => {
    const noteDrawer = DrawerComponent.getInstance('kt_drawer_notification');
    if (noteDrawer) {
        noteDrawer.on("kt.drawer.hide", function () {
            '''type your code here'''
        });
    }
}, [])

When using this code snippet, you need to type the right path of DrawerComponent.

How to catch the hide event of a drawer in Metronic 8 React theme?

1 Answers1