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

React components for building a notification inbox for your app

import { clientSettings } from '@magicbell/react-headless';
import { isSupported, registerServiceWorker, WebPushClient } from '@magicbell/webpush';
import { useEffect } from 'react';
/**
 * Headless component to create subscriptions to push notifications for the
 * current user.
 *
 * @example
 * <PushNotificationsSubscriber>
 *   {({ createSubscription }) => (
 *     <button onClick={createSubscription}>Subscribe</button>
 *   )}
 * <PushNotificationsSubscriber>
 */
export default function PushNotificationsSubscriber({ children, serviceWorkerPath = '/service-worker.js', skipServiceWorkerRegistration = false, }) {
    const isPushAPISupported = isSupported();
    useEffect(() => {
        if (skipServiceWorkerRegistration)
            return;
        registerServiceWorker(serviceWorkerPath).catch((error) => {
            console.error(`Error registering service worker: ${error}`);
        });
    }, [serviceWorkerPath, skipServiceWorkerRegistration]);
    const createSubscription = async () => {
        const credentials = clientSettings.getState();
        if (!credentials?.apiKey) {
            throw new Error('MagicBell Context was not found, did you wrap this in a MagicBellProvider?');
        }
        if (!credentials.userExternalId && !credentials.userEmail) {
            throw new Error("Can't subscribe without either a userExternalId or userEmail");
        }
        const options = {
            host: credentials.serverURL,
            apiKey: credentials.apiKey,
            userHmac: credentials.userKey,
            userExternalId: credentials.userExternalId,
            userEmail: credentials.userEmail,
            serviceWorkerPath,
        };
        const client = new WebPushClient(options);
        return client.subscribe();
    };
    return children({ createSubscription, isPushAPISupported });
}
//# sourceMappingURL=PushNotificationsSubscriber.js.map