hooks.useStreamSource

Classes¶

StreamActions¶

Defined in: hooks/useStreamSource.tsx:36

Actions for handling stream operations like append, prepend, and update

Constructors¶

Constructor¶

new StreamActions(__namedParameters: { store: SuperglueStore; }): StreamActions

Defined in: hooks/useStreamSource.tsx:40

Parameters¶

Parameter	Type
`__namedParameters`	{ `store`: `SuperglueStore`; }
`__namedParameters.store`	`SuperglueStore`

Returns¶

StreamActions

Properties¶

Property	Modifier	Type	Defined in
`attributePrefix`	`public`	`string`	hooks/useStreamSource.tsx:37

Methods¶

prepend()¶

prepend(fragments: string[], data: JSONMappable, options: { saveAs?: string; }): void

Defined in: hooks/useStreamSource.tsx:44

Parameters¶

Parameter	Type
`fragments`	`string`[]
`data`	`JSONMappable`
`options`	{ `saveAs?`: `string`; }
`options.saveAs?`	`string`

Returns¶

void

update()¶

update(fragment: string, data: JSONMappable): void

Defined in: hooks/useStreamSource.tsx:52

Parameters¶

Parameter	Type
`fragment`	`string`
`data`	`JSONMappable`

Returns¶

void

append()¶

append(fragments: string[], data: JSONMappable, options: { saveAs?: string; }): void

Defined in: hooks/useStreamSource.tsx:56

Parameters¶

Parameter	Type
`fragments`	`string`[]
`data`	`JSONMappable`
`options`	{ `saveAs?`: `string`; }
`options.saveAs?`	`string`

Returns¶

void

handle()¶

handle(rawMessage: string): void

Defined in: hooks/useStreamSource.tsx:64

Parameters¶

Parameter	Type
`rawMessage`	`string`

Returns¶

void

Type Aliases¶

StreamSourceProps¶

StreamSourceProps = string | ChannelNameWithParams

Defined in: hooks/useStreamSource.tsx:19

Channel configuration for stream sources

StreamMessage¶

StreamMessage = { action: "handleStreamMessage"; data: JSONMappable; fragmentIds: string[]; handler: "append" | "prepend" | "update"; options: Record\<string, string>; fragments: FragmentPath[]; }

Defined in: hooks/useStreamSource.tsx:21

Properties¶

action¶

action: "handleStreamMessage"

Defined in: hooks/useStreamSource.tsx:22

data¶

data: JSONMappable

Defined in: hooks/useStreamSource.tsx:23

fragmentIds¶

fragmentIds: string[]

Defined in: hooks/useStreamSource.tsx:24

handler¶

handler: "append" | "prepend" | "update"

Defined in: hooks/useStreamSource.tsx:25

options¶

options: Record\<string, string>

Defined in: hooks/useStreamSource.tsx:26

fragments¶

fragments: FragmentPath[]

Defined in: hooks/useStreamSource.tsx:27

Variables¶

CableContext¶

const CableContext: Context\<{ cable: null | Consumer; streamActions: null | StreamActions; }>

Defined in: hooks/useStreamSource.tsx:73

Functions¶

useStreamSource()¶

useStreamSource(channel: StreamSourceProps): { connected: boolean; subscription: null | Subscription; }

Defined in: hooks/useStreamSource.tsx:138

Creates a subscription to an ActionCable channel for real-time streaming updates.

This hook manages the lifecycle of an ActionCable subscription, automatically connecting when the cable is available and cleaning up on unmount. Stream messages are processed through StreamActions to update the Redux store.

Typically used with channel configuration generated by the Rails helper stream_from_props helper in your props templates.

*

Parameters¶

Parameter	Type	Description
`channel`	`StreamSourceProps`	Channel configuration as string or ChannelNameWithParams object, typically generated by Rails `stream_from_props` helper

Returns¶

Object containing connection status and subscription instance

Name	Type	Description	Defined in
`connected`	`boolean`	Whether the ActionCable subscription is currently connected	hooks/useStreamSource.tsx:140
`subscription`	`null` \| `Subscription`	The active ActionCable subscription instance, null if not connected	hooks/useStreamSource.tsx:142

Examples¶

Using the helper:

# app/views/chat_rooms/show.json.props
json.chatChannel stream_from_props("messages")

const content = useContent()
const { connected } = useStreamSource(content.chatChannel)

Basic channel subscription:

const { connected } = useStreamSource('ChatChannel')

Channel with parameters:

const { connected } = useStreamSource({
  channel: 'ChatChannel',
  room_id: roomId
})

Using connection status:

const { connected, subscription } = useStreamSource('NotificationsChannel')

return (
  <div>
    {connected ? 'Connected' : 'Connecting...'}
    {subscription && <span>Subscription active</span>}
  </div>
)