# Streams

TypeScript source: `components/Streams.tsx`

## Components

### Streams

Source: `components/Streams.tsx:744`

```ts
React.FC<StreamsProps>
```

Renders available DepthAI image, depth, point cloud, and RGBD streams with selection controls.

#### Example

```tsx
<Streams targetFps={30} hideToolbar />
```

## Types

### OnClickHandler

Source: `components/Streams.tsx:132`

```ts
(event: React.MouseEvent, clickOffsetCoords: { offsetX: number; offsetY: number } | undefined) => void
```

Click handler invoked from stream panels with optional cursor coordinates inside the rendered frame.

### StreamsProps

Source: `components/Streams.tsx:151`

Props for the DepthAI stream panel collection.

#### Members

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `actions?` | `Record<string, JSX.Element>` |  | Additional toolbar actions keyed by stream type. |
| `allowedTopics?` | `string[]` |  | Restricts the visible and toggleable stream topics to this allow-list. |
| `customLoadingElement?` | `React.JSX.Element` | | Custom loading or empty-stream element rendered instead of the default loading
state.<br />Remarks: This is most useful together with `defaultTopics`; otherwise a host application can render a persistent
loading element while no topic is selected. |
| `defaultTopicFrameWaitTimeoutMs?` | `number` | `15000` | Maximum time to wait for the first default topic frame before leaving
the loading state. |
| `defaultTopics?` | `string[]` |  | Topics that should be opened automatically once the connection reports available streams. |
| `deviceOptions?` | `DeviceConfiguration | null` |  | Device metadata used by host applications to tailor stream controls. |
| `disableZoom?` | `boolean` |  | Disables zoom interaction in image panels. |
| `hideToolbar?` | `boolean` |  | Hides per-panel toolbars when the host provides its own controls. |
| `isDeviceDisconnected?` | `boolean` |  | Marks the selected device as disconnected while keeping the connection UI mounted. |
| `isMultipleNotConnected?` | `boolean` |  | Shows a multi-device empty state when no device is selected. |
| `isPCExplicitlyClicked?` | `boolean` |  | Tracks whether the point cloud stream was explicitly enabled by the user. |
| `isViewer?` | `boolean` |  | Enables Viewer-specific empty states and point cloud behavior. |
| `numberOfColumns?` | `number` |  | Overrides the column count used by the stream panel layout. |
| `setIsPCExplicitlyClicked?` | `React.Dispatch<React.SetStateAction<boolean>>` | | Updates the explicit point cloud selection
state. |
| `shouldDisplayAd?` | `boolean` |  | Allows the delayed store/documentation call-to-action when no streams are available. |
| `targetFps?` | `number` |  | Target FPS shown by stream panels when performance metrics are enabled. |
| `topicGroups?` | `TopicGroup | null` |  | Mapping from stream topic names to their visual group labels. |
| `topicOnClickHandlersMap?` | `Map<string, OnClickHandler>` |  | Optional click handlers keyed by topic name. |
| `topicOverlayMap?` | `Map<StreamType, React.JSX.Element>` |  | Optional overlays rendered above specific stream panels. |
| `topicSortingFunction?` | `(a: Topic, b: Topic) => number` | | Custom sorting function applied to enabled stream topics before
layout. |
| `triggerToast?` | `() => void` |  | Optional callback used by stream panels to show host application notifications. |
| `waitForDefaultTopicFrame?` | `boolean` | `false` | Keeps the loading state visible until one of the default topic frames
arrives. |