React Hooks
Hooks for reading bridge state in React client apps.
Install the React hooks package:
pnpm add @riftix/console-bridge-snippet-reactAll hooks read from window.Riftix and re-render when the underlying state changes. They are SSR-safe.
useRiftix
Returns the Riftix global, or null if the snippet has not loaded yet.
function useRiftix(): Riftix | nullPolls every 50ms until window.Riftix appears, then stops. Useful for conditional rendering while the snippet loads.
function BridgeStatus() {
const riftix = useRiftix();
if (!riftix) return <p>Snippet loading…</p>;
return <p>Bridge ready</p>;
}useRiftixContext
Returns a tri-state object tracking the host context.
type ContextState =
| { status: "loading"; context: null; error: null }
| { status: "ready"; context: HostContext; error: null }
| { status: "error"; context: null; error: unknown }
function useRiftixContext(): ContextStateloading: waiting forriftix.readyto resolve.ready:riftix.readyresolved,contextis the currentHostContext. Updates whenevercontext:changedfires.error:riftix.readyrejected (handshake timeout or network error).
Reads riftix.context synchronously on first render to avoid an unnecessary loading flash if the bridge is already connected.
function ThemeAwareLayout({ children }: { children: React.ReactNode }) {
const { status, context } = useRiftixContext();
if (status === "loading") return <Spinner />;
if (status === "error") return <ErrorPage />;
return <div data-theme={context.theme}>{children}</div>;
}useRiftixAuthorization
Returns the current BridgeAuthorization or null.
function useRiftixAuthorization(): BridgeAuthorization | nullRe-renders whenever authorization:changed fires. Reads riftix?.authorization synchronously to avoid flicker.
function AuthBadge() {
const auth = useRiftixAuthorization();
if (!auth) return null;
return <span>Organization: {auth.organizationId}</span>;
}useRiftixEvent
Subscribe to any bridge event. The handler is called with the event payload; the subscription is stable across renders (handler identity changes do not cause re-subscribes).
function useRiftixEvent<E extends BridgeEventName>(
event: E,
handler: (payload: BridgeEventPayload<E>) => void
): voidRe-subscribes only when riftix or event changes.
function DarkModeSync() {
useRiftixEvent("context:changed", (ctx) => {
document.documentElement.classList.toggle("dark", ctx.theme === "dark");
});
return null;
}function AuthWatcher() {
useRiftixEvent("authorization:changed", (auth) => {
if (!auth) {
console.warn("Authorization revoked");
}
});
return null;
}