@playlive/react-pipeline

@playlive/react-pipeline — public entry point (Tier 1 + Tier 2).

React bindings for @playlive/realtime-pipeline. The default barrel ships the lean Tier 1 (usePipelineValue + RealtimePipelineProvider) and Tier 2 (typed per-slice hooks) surfaces — under 6 KB gzip, Twitch-Extension safe, and free of react-use-websocket-lite.

The kitchen-sink Tier 3 surface (UnifiedDataPipelineProvider, useUnifiedDataPipeline, the useAddPipeline* effect hooks) lives behind the @playlive/react-pipeline/provider subpath so consumers who only want a single live value don't pay for it.

Subpath exports (jose-style):

@playlive/react-pipeline — Tier 1 + Tier 2 (this file).
@playlive/react-pipeline/provider — Tier 3 kitchen-sink.
@playlive/react-pipeline/fusion — cross-tier composition hooks (e.g. useCurrentBlockRaised) that fuse the WS firehose with REST baselines from @playlive/fundraiser-data. Requires the @tanstack/react-query, @playlive/react-query, and @playlive/fundraiser-data peers (optional; only needed when you import from this subpath).
@playlive/react-pipeline/legacy — back-compat re-exports under the old playlive-overlay-data-layer/src/websocket/* names.

Peer deps: react, react-dom, zustand, @playlive/realtime-pipeline, @playlive/tiltify-core (types only).

Example

import { RealtimePipelineProvider, usePipelineCampaigns } from "@playlive/react-pipeline";

function App() {
  return (
    <RealtimePipelineProvider initialCampaignIDs={["abc-123"]}>
      <Overlay />
    </RealtimePipelineProvider>
  );
}

function Overlay() {
  const campaigns = usePipelineCampaigns();
  return <pre>{JSON.stringify(campaigns)}</pre>;
}

Interfaces

PipelineConnectionActions
PipelineConnectionState
PipelineDonationSumByCurrency
PipelineDonationSumOptions
PipelineDonationSumResult
RealtimePipelineProviderProps

Variables

KNOWN_URLS
PACKAGE_NAME

Functions

RealtimePipelineProvider
useOnLeaderboardEntriesChange
useOnLeaderboardExclusionsChange
useOnScheduleTransition
useOnScheduleUpdate
usePipelineAuctionHouses
usePipelineCampaigns
usePipelineCauses
usePipelineConnectionActions
usePipelineConnectionState
usePipelineDonations
usePipelineDonationSum
usePipelineDonationTrains
usePipelineDonorSpotlight
usePipelineDonorSpotlightSettings
usePipelineFundraisingEvents
usePipelineLastRefreshResponse
usePipelineLastScheduleTransition
usePipelineLastScheduleTransitions
usePipelineLeaderboardEntries
usePipelineLeaderboardExclusions
usePipelineLeaderboardExclusionsMap
usePipelineMilestones
usePipelinePollDeltas
usePipelinePolls
usePipelineRewards
usePipelineSchedule
usePipelineSchedules
usePipelineSubathonTimer
usePipelineSubscriptions
usePipelineTargets
usePipelineTeamCampaigns
usePipelineTiltifySettings
usePipelineTwitchChat
usePipelineValue

@playlive/react-pipeline

Example

Interfaces

Variables

Functions

Settings

On This Page