Set a Custom Click Handler

If you create notifications with an action_url, this URL will be opened in the same window when a user clicks on the notification. However, you can easily set a custom click handler by setting the onNotificationClick property on the FloatingNotificationInbox component.

Preview

  {(props) => (
     {
        alert(notification.title);
      }}
      {...props}
    />
  )}

Open the action url in a new tab

React
import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  const openActionUrl = (notification) => {
    // Open the action url in a new tab if the notification has one
    if (notification.actionUrl) window.open(notification.actionUrl);
  };

  return (
    
      {(props) => (
        
      )}
    
  );
}

Single page application navigation

The following example shows how to do navigation in a single page application (SPA) that has React Router.

React
import React from 'react';
import { useNavigate } from 'react-router-dom';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  const navigate = useNavigate();

  const navigateToActionUrl = (notification) => {
    if (notification.actionUrl) navigate(notification.actionUrl);
  };

  return (
    
      {(props) => (
        
      )}
    
  );
}