Using StreamLayer UI Context

Access StreamLayer UI state flags via the useStreamLayerUI React hook to control component visibility in your application.

Overview

The useStreamLayerUI hook provides access to StreamLayer UI state. Most listed fields are optional booleans; responsiveLayout is an optional layout name. Use these flags to control the visibility of UI elements in your application.

Available Flags

promotionExternalAd?: boolean
promotionSidebar?: boolean
promotionSideBySide?: boolean
promotionOverlay?: boolean
promotionNotification?: boolean
promotionBanner?: boolean
promotionViewed?: boolean
app?: boolean
appSidebar?: boolean
appNotification?: boolean
appBanner?: boolean
onboardingNotification?: boolean
exposedPauseAd?: boolean
ssaiAdBreak?: boolean // TV platforms only
polymarket?: boolean
responsiveLayout?: 'mobile' | 'desktop'

Usage

import { useStreamLayerUI } from '@streamlayer/react'

export function AdStatus() {
  const ui = useStreamLayerUI()
  return <span>{ui.promotionViewed ? 'Ad viewed' : 'Ad not yet viewed'}</span>
}

Render this component inside StreamLayerProvider. Read the flags to reflect SDK state; this example does not request or render an ad.

Related

Using StreamLayer Context — Access SDK core context
Advertising — Advertisement component integration
Integration Guide — Full Web SDK setup

Updated about 1 month ago