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.

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:

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="[email protected]">
      {(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.

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.