Render Notifications in a Sidebar

The @magicbell/magicbell-react package provides the helpers you need to render your notification inbox the way that better suits your needs.

To render the notification inbox in a sidebar or off-canvas, you can use these components and hooks:

• MagicBellProvider, it takes care of establishing the connection with MagicBell's servers, and,
  as its name implies, creates a React context for the notification inbox.
• NotificationList, it renders all your notifications in an infinite-scroll list.
• Bell, renders the bell and the badge of unseen/unread notifications.
• useNotifications, it returns the list of notifications updated in real-time.

Here you have a full example:

import React, { useState } from 'react';
import { Bell, NotificationList, useNotifications } from '@magicbell/magicbell-react';

function Header() {
  const notifications = useNotifications();

  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (
    <header>
      <Bell onClick={toggleSidebar} />
      {isSidebarOpen ? (
        <div className="sidebar">
          <NotificationList notifications={notifications} />
        </div>
      ) : null}
    </header>
  );
}

export default function App() {
  return (
    <MagicBellProvider apiKey="MAGICBELL_API_KEY" userEmail="[email protected]">
      <Header />
    </MagicBellProvider>
  );
}

Note that the useNotifications hook must be used in a component that is wrapped with the MagicBellProvider, otherwise React will raise an error.

The @magicbell/magicbell-react does not export a sidebar component. Your UI library might provide one.