@whop/react/dist/websockets/provider.mjs

React SDK for building embedded apps on Whop

"use client";
import { WhopClientSdk } from "@whop/api";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { WhopWebsocketContext } from "./context.mjs";
export function WhopWebsocketProvider({ children, joinCustom, joinExperience, onAppMessage }) {
    const [websocket, setWebsocket] = useState();
    const [connectionStatus, setConnectionStatus] = useState("disconnected");
    const sdkRef = useRef(null);
    useEffect(()=>{
        if (!sdkRef.current) {
            sdkRef.current = WhopClientSdk();
        }
        const whopSdk = sdkRef.current;
        const websocket = whopSdk.websockets.client({
            joinCustom,
            joinExperience
        });
        setWebsocket(websocket);
        websocket.on("connectionStatus", setConnectionStatus);
        return websocket.connect();
    }, [
        joinExperience,
        joinCustom
    ]);
    useEffect(()=>{
        if (websocket && onAppMessage) {
            websocket.on("appMessage", onAppMessage);
            return ()=>{
                websocket.off("appMessage", onAppMessage);
            };
        }
    }, [
        onAppMessage,
        websocket
    ]);
    const value = useMemo(()=>{
        if (websocket) {
            return {
                status: connectionStatus,
                websocket
            };
        }
        return {
            status: "initializing"
        };
    }, [
        websocket,
        connectionStatus
    ]);
    return React.createElement(WhopWebsocketContext, {
        value: value
    }, children);
}