Change the Default Notification Component

Learn how to use your own component to render notifications in the notification inbox

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 (
    <div>
      <a href={state.actionUrl}>
        <b>{state.title}</b>
        <p>{state.content}</p>
      </a>
      <button onClick={handleClick}>Mark as read</button>
    <div>
  );
}

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 (
    <MagicBell apiKey="MAGICBELL_API_KEY" userEmail="mary@example.com">
      {(props) => (
        <FloatingNotificationInbox
          height={500}
          NotificationItem={CustomNotification}
          {...props}
        />
      )}
    </MagicBell>
  );
}

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 (
    <a
      href={state.actionUrl}
      style={{
        backgroundColor: theme.notification.default.backgroundColor,
        fontSize: theme.notification.default.fontSize,
      }}
    >
      <b>{state.title}</b>
      <p>{state.content}</p>
    </a>
  );
}

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