React Components

This package contains the React components to build a notifications UI for your site powered by MagicBell.

Quick Start

npm install @magicbell/react

Authentication

You'll need a User JWT to use the SDK. You can generate these on your own server. Read our Authentication Docs to learn how to do this.

ContextProvider

Provides the MagicBell context to all components in the SDK.

Wrap your app in this component to enable access to the MagicBell API client, local-first user/session state, and shared configuration. Required for components like Inbox, FloatingInbox, and SlackButton to function.

import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import FloatingInbox from "@magicbell/react/floating-inbox";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <nav>
        <div>logo</div>
        <FloatingInbox />
      </nav>
      <main>your content here</main>
    </Provider>
  );
}

export default App;

Properties

FloatingInbox

A floating version of the notification inbox, toggled by a button.

Renders the inbox inside a floating panel positioned relative to a trigger. Ideal for embedding in navigation bars or headers. Supports full customization of placement, dimensions, trigger, and inbox content.

import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import FloatingInbox from "@magicbell/react/floating-inbox";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <FloatingInbox
        placement="bottom-start"
        height={500}
        width={400}
        offset={10}
      />
    </Provider>
  );
}

export default App;

Properties

Inbox

A notification inbox component that displays a list of notifications for the current user.

Supports pagination, read/unread states, and customizable rendering of notification items. Can be embedded directly in a page or used in combination with floating UIs using FloatingInbox.

import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import Inbox from "@magicbell/react/inbox";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <Inbox />
    </Provider>
  );
}

export default App;

Properties

InlineNotification

Properties

SlackButton

A button to subscribe or unsubscribe a user to your Slack channel.

Registers or removes the user’s Slack token using the provided Slack App ID. Supports custom labels, styling, and redirect flow.

import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import SlackButton from "@magicbell/react/slack-button";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <SlackButton
        redirectUrl="https://example.com"
        appId="A06DAT80SHF"
        renderLabel={({ status, error }) =>
          error || (status === "success" ? "disable" : "enable")
        }
      />
    </Provider>
  );
}

export default App;

Properties

WebPushButton

A button to subscribe or unsubscribe a user to Web Push Notifications.

Uses the Push API to register or remove the user’s subscription. The user stays on the page; no redirect is involved. Requires a configured service worker. Supports custom labels, styling, and ref forwarding.

To enable web push, your service worker must import MagicBell’s script:

importScripts('https://assets.magicbell.io/web-push-notifications/sw.js');

import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import WebPushButton from "@magicbell/react/webpush-button";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <WebPushButton
        renderLabel={({ status, error }) =>
          error || (status === "success" ? "disable" : "enable")
        }
      />
    </Provider>
  );
}

export default App;

Properties