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:

React
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 (
    

      
      {isSidebarOpen ? (
        

          
        
      ) : null}
    
  );
}

export default function App() {
  return (
    
      

    
  );
}

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 at the moment. Your UI library might provide one.