@magicbell/magicbell-react/dist/esm/components/MagicBell/MagicBell.js

React components for building a notification inbox for your app

import { useMagicBellEvent } from '@magicbell/react-headless';
import React, { useRef, useState } from 'react';
import Bell from '../Bell/index.js';
import FloatingNotificationInbox from '../FloatingNotificationInbox/index.js';
import MagicBellChildrenWrapper from '../MagicBellProvider/MagicBellChildrenWrapper.js';
const defaultInbox = (props) => React.createElement(FloatingNotificationInbox, { height: 500, ...props });
/**
 * Magicbell root component. Use this one in your application.
 *
 * @param props.apiKey API key of the MagicBell project
 * @param props.userEmail Email of the user whose notifications will be displayed
 * @param props.userExternalId External ID of the user whose notifications will be displayed
 * @param props.userKey Computed HMAC of the user whose notifications will be displayed, compute this with the secret of the magicbell project
 * @param props.theme Object to customize the theme
 * @param props.BellIcon Icon for the bell
 * @param props.Badge A custom badge component to show the number of unread or unseen notifications
 * @param props.defaultIsOpen Show the children when the component is rendered. It is false by default.
 * @param props.stores Configuration of stores to be created
 * @param props.locale Locale to use in the components
 * @param props.onNewNotification Function called when a notification is created.
 * @param props.onToggle Function called when the bell is clicked.
 * @param props.isOpen Whether the notification inbox is open or not, use to control state.
 * @param props.bellCounter Counter to show in the bell. If set to 'unread' it will show the number of unread notifications.
 *
 * @example
 * <MagicBell
 *   apiKey={MAGICBELL_API_KEY}
 *   userEmail={email}
 *   BellIcon={<MyIcon />}
 * >
 *   {(props) => <NotificationInbox {...props} />}
 * </MagicBell>
 */
export default function MagicBell({ children = defaultInbox, BellIcon, Badge, defaultIsOpen = false, onNewNotification, onToggle, bellCounter = 'unseen', isOpen: externalIsOpen, ...settings }) {
    const launcherRef = useRef(null);
    const isControlled = typeof externalIsOpen !== 'undefined';
    const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
    const isOpen = isControlled ? externalIsOpen : internalIsOpen;
    const handleToggle = () => {
        if (!isControlled) {
            setInternalIsOpen((c) => !c);
        }
        onToggle?.(!isOpen);
    };
    const handleNewNotification = (notification) => {
        onNewNotification?.(notification);
    };
    useMagicBellEvent('notifications.new', handleNewNotification);
    return (React.createElement(MagicBellChildrenWrapper, { ...settings },
        React.createElement("div", null,
            React.createElement("div", { ref: launcherRef, "aria-expanded": isOpen },
                React.createElement(Bell, { onClick: handleToggle, Icon: BellIcon, Badge: Badge, counter: bellCounter })),
            isOpen && children({ isOpen, toggle: handleToggle, launcherRef }))));
}
//# sourceMappingURL=MagicBell.js.map