InteractionProvider — React Bindings

What InteractionProvider Does on Mount

Reads EdgeStream Context

Reads the EdgeStreamContext to get the current EdgeStream client and authenticated user ID.

Creates InteractionClient

Instantiates an InteractionClient backed by the EdgeStream client. This is the runtime object all hooks use.

Subscribes to interaction topics

Subscribes to interactions.{userId} and interactions.dismiss.{userId}. Pending interactions delivered during this step are added to the queue immediately.

Provides Context

Makes InteractionContext available to all descendant components. Hooks like useInteractionReceiver() consume this context.

Props

Prop	Type	Default	Description
`historyLimit`	number	50	Max completed interactions kept in the history store
`onError`	`(error: Error) => void`	—	Callback for subscription or client errors
`children`	ReactNode	—	Required — your app content

Complete Setup Example

import { EdgeStreamProvider } from 'edge-stream-react';
import { InteractionProvider } from 'edge-interact-react';
import { InteractionContainer, registerInteractionRenderer } from 'edge-interact-ui';
import { SpecialReviewComponent } from './interactions/SpecialReviewComponent';

// Register custom renderers before rendering the provider
registerInteractionRenderer('com.acme/special-review', SpecialReviewComponent);

function AppRoot() {
  const { user } = useAuth();

  if (!user) return <LoginPage />;

  return (
    <EdgeStreamProvider
      hubUrl="/edge-stream"
      userId={user.id}
      accessToken={user.token}
    >
      <InteractionProvider
        historyLimit={100}
        onError={(err) => console.error('EdgeInteract error:', err)}
      >
        <InteractionContainer renderMode="modal" />
        <AppRouter />
      </InteractionProvider>
    </EdgeStreamProvider>
  );
}

Context Shape

interface InteractionContextValue {
  /** Current pending interactions in priority order */
  queue: InteractionRequest[];

  /** Completed interactions (most recent first) */
  history: CompletedInteraction[];

  /** The underlying interaction client */
  client: InteractionClient;

  /** Respond to an interaction by ID */
  respond: (interactionId: string, outcome: string, data?: unknown) => Promise<void>;

  /** Is the provider connected? */
  isConnected: boolean;
}

Place at Root Level Place InteractionProvider as high as possible in your component tree — ideally at the app root, inside EdgeStreamProvider. This ensures all components can access the interaction context without prop drilling.

← React Bindings Overview Next: useInteraction →