@magicbell/magicbell-react/dist/esm/components/MagicBellProvider/MagicBellProvider.d.ts

React components for building a notification inbox for your app

import React from 'react';
import { IMagicBellTheme } from '../../context/Theme.js';
import { CustomLocale } from '../../lib/i18n.js';
import { DeepPartial } from '../../lib/types.js';
import { Props as MagicBellProps } from '../MagicBell/MagicBell.js';
export type MagicBellProviderProps = {
    apiKey: string;
    userEmail?: string;
    userExternalId?: string;
    userKey?: string;
    children: React.ReactElement | React.ReactElement[];
    theme?: DeepPartial<IMagicBellTheme>;
    stores?: MagicBellProps['stores'];
    locale?: string | CustomLocale;
    images?: Partial<{
        emptyInboxUrl: string;
    }>;
    serverURL?: string;
    disableRealtime?: boolean;
    network?: {
        maxRetries?: number;
        cacheTTL?: number;
    };
} & ({
    userExternalId: string;
} | {
    userEmail: string;
});
/**
 * Provider component for Magicbell.
 *
 * @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.stores List of stores to be created
 * @param props.locale Locale to use in the components
 * @param props.disableRealtime Disable realtime updates
 *
 * @example
 * ```javascript
 * <MagicBellProvider apiKey={MAGICBELL_API_KEY} userEmail={email}>
 *   <App />
 * </MagicBellProvider>
 * ```
 */
export default function MagicBellProvider({ children, theme, images, locale, ...settings }: MagicBellProviderProps): React.JSX.Element;