Stream.List

Stream.List renders array children with automatic fallback. It filters out incomplete items (those containing undefined) during streaming and shows fallback when no valid children exist.

Demo

0/3 items

items

Usage

import { Stream } from "@stream.ui/react";

const { object, isLoading } = useObject({ schema: mySchema });

<Stream.Root data={object} isLoading={isLoading}>
  <Stream.List
    fallback={
      <div className="grid grid-cols-3 gap-4">
        {[0, 1, 2].map((i) => (
          <Skeleton key={i} className="h-20" />
        ))}
      </div>
    }
  >
    {object?.forecast?.map((day) => (
      <ForecastDay key={day.id} {...day} />
    ))}
  </Stream.List>
</Stream.Root>

Anatomy

import { Stream } from "@stream.ui/react";

<Stream.List fallback={<Fallback />}>
  {array?.map(item => <Item key={item.id} {...item} />)}
</Stream.List>

Examples

Basic List

<Stream.List fallback={<ResultsSkeleton />}>
  {object?.results?.map((result) => (
    <li key={result.id}>{result.title}</li>
  ))}
</Stream.List>

Grid Layout

import { Skeleton } from "@/components/ui/skeleton";

<Stream.List
  fallback={
    <div className="grid grid-cols-3 gap-4">
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <Skeleton key={i} className="h-48 rounded-xl" />
      ))}
    </div>
  }
>
  {object?.products?.map((product) => (
    <ProductCard key={product.id} {...product} />
  ))}
</Stream.List>

Nested Arrays

<Stream.List fallback={<PostsSkeleton />}>
  {object?.user?.posts?.map((post) => (
    <PostCard key={post.id} post={post} />
  ))}
</Stream.List>

With Wrapper Element

Wrap children in a container:

<Stream.List fallback={<Skeleton className="h-32" />}>
  <ul className="space-y-2">
    {object?.items?.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
</Stream.List>

How It Works

As the array streams in, items appear incrementally:

t=0: fallback shown (children is undefined)
t=1: fallback shown (all items contain undefined)
t=2: [<Item1 />] (first complete item)
t=3: [<Item1 />, <Item2 />] (second complete item)
...

The component:

Shows fallback if children is undefined or null
Filters out elements that contain undefined values (incomplete items)
Shows fallback if no valid elements remain
Renders valid elements as-is

API Reference

Props

Prop	Type	Default
`fallback`	`ReactNode`	`null`
`children`	`ReactNode`	—

Stream.List

On this page