Render Notifications in a Sidebar

Learn how to create a notification inbox 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.