@magicbell/magicbell-react/dist/commonjs/components/MagicBell/MagicBell.d.ts

React components for building a notification inbox for your app

import { INotificationStore, IRemoteNotification } from '@magicbell/react-headless';
import React from 'react';
import { IMagicBellTheme } from '../../context/Theme.js';
import { CustomLocale } from '../../lib/i18n.js';
import { DeepPartial } from '../../lib/types.js';
type StoreConfig = {
    id: string;
    defaultQueryParams: {
        read?: boolean;
        seen?: boolean;
        archived?: boolean;
        category?: string;
        topic?: string;
        [key: string]: unknown;
    };
    defaults?: Partial<Omit<INotificationStore, 'context'>>;
};
export type Props = {
    apiKey: string;
    userEmail?: string;
    userExternalId?: string;
    userKey?: string;
    children?: (params: {
        launcherRef: React.RefObject<Element>;
        isOpen: boolean;
        toggle: () => void;
    }) => JSX.Element;
    theme?: DeepPartial<IMagicBellTheme>;
    BellIcon?: JSX.Element;
    Badge?: (props: {
        count: number;
    }) => JSX.Element;
    defaultIsOpen?: boolean;
    stores?: StoreConfig[];
    locale?: string | CustomLocale;
    images?: Partial<{
        emptyInboxUrl: string;
    }>;
    serverURL?: string;
    socketURL?: string;
    disableRealtime?: boolean;
    onNewNotification?: (notification: IRemoteNotification) => void;
    onToggle?: (isOpen: boolean) => void;
    isOpen?: boolean;
    bellCounter?: 'unread' | 'unseen';
    network?: {
        maxRetries?: number;
        cacheTTL?: number;
    };
} & ({
    userExternalId: string;
} | {
    userEmail: string;
});
/**
 * 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, BellIcon, Badge, defaultIsOpen, onNewNotification, onToggle, bellCounter, isOpen: externalIsOpen, ...settings }: Props): React.JSX.Element;
export {};