Customize Behavior

To get the Notifications Element, you can use the following hook:

import { useNotificationsUtils } from '@veltdev/react';

const notificationElement = useNotificationsUtils();

The hook will automatically unsubscribe from the subscription when the component dismounts.

import { useNotificationsData } from '@veltdev/react';

const notificationData = useNotificationsData();

You can use the following methods to Open, Close, or Toggle the Notifications History Panel component.

// to open notifications history panel
notificationElement.openHistoryPanel();

// to close notifications history panel
notificationElement.closeHistoryPanel();

// to toggle notifications history panel
notificationElement.toggleHistoryPanel();

By default, the Notifications Panel appears floating over the Notification Tool button when the button is clicked without needing to add the VeltNotificationsPanel component.

The Notifications Panel has an option to be embedded within another component, instead of hovering over the Notification Tool button.

To do this, add the VeltNotificationsPanel component in your app template where you want the panel to be embedded.

<div>
  <VeltNotificationsTool/>
  <div className="sidepanel">
    <VeltNotificationsPanel/>
  </div>
</div>

By default, the Notifications History Panel appears on the side when it is opened.

The Notifications History Panel has an option to be embedded within another component, instead appearing in the side.

To do this, set the embedMode property to true on the VeltNotificationsHistoryPanel component.

<div className="embedpanel">
  <VeltNotificationsHistoryPanel embedMode={true}/>
</div>

The onNotificationClick event is emitted when a notification is clicked.

This can be applied to Notifications on either the Notification Tool, Notification Panel or the Notification History Panel.

• Use listener on Notification Tool: If you are not using Notification Panel or Notification History Panel in embed mode.
• Use listener on Notification Panel: If you are using Notification Panel in embed mode.
• Use listener on Notification History Panel: If you are using Notification History Panel in embed mode.

const onNotificationClickEvent = (notification) => {
	console.log('onNotificationClick: ', notification);
}

<VeltNotificationsTool onNotificationClick={(notification) => onNotificationClickEvent(notification)} />
<VeltNotificationsPanel onNotificationClick={(notification) => onNotificationClickEvent(notification)} />
<VeltNotificationsHistoryPanel onNotificationClick={(notification) => onNotificationClickEvent(notification)} />