Change the default Notification Component

MagicBell exposes components and hooks that can help you to create your own notification inbox in a breeze. To change the default notification component:

• Define your custom component for rendering notifications
• Pass it to the FloatingNotificationInbox component using the NotificationItem property

Creating a custom notification component

The useNotification hook will return data you can use to render a notification in your custom component. It also gives your component real-time capabilities, so it will be automatically updated to reflect changes in other tabs, for example.

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

export default function CustomNotification({ notification }) {
  const state = useNotification(notification);
  const handleClick = () => state.markAsRead();

  return (
    

      
        {state.title}
        
{state.content}
      
      Mark as read
    

  );
}

Then, pass it to the FloatingNotificationInbox component:

React
import React from 'react';
import MagicBell from '@magicbell/magicbell-react';
import CustomNotification from './CustomNotification';

export default function Notifications() {
  return (
    
      {(props) => (
        
      )}
    
  );
}

Styling your custom component

You can choose any method of your liking to style your custom notification component. However, MagicBell comes with a theme context, which you can leverage if you want to.

You may access MagicBell's theme context using the useTheme hook from our react package.

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

export default function CustomNotification(notification) {
  const state = useNotification(notification);
  const theme = useTheme();

  return (
    
      {state.title}
      
{state.content}
    
  );
}

Please refer to our theming guide for a complete description of the theme context.