Stream.Field

Stream.Field inspects its children for undefined values. If any are found (indicating a streamed field hasn't arrived yet), it shows the fallback. Otherwise, it renders the children as-is.

Demo

Idle

title

description

value

Usage

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

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

<Stream.Root data={object} isLoading={isLoading}>
  {/* Shows fallback while object?.location is undefined */}
  <Stream.Field fallback={<Skeleton className="h-6 w-32" />}>
    <h3 className="text-lg font-semibold">{object?.location}</h3>
  </Stream.Field>

  {/* Works with any JSX structure */}
  <Stream.Field fallback={<Skeleton className="h-4 w-24" />}>
    <span className="text-4xl">{object?.temperature}°C</span>
  </Stream.Field>

  {/* Also works with just the value */}
  <Stream.Field fallback={<Skeleton className="h-4 w-16" />}>
    {object?.humidity}%
  </Stream.Field>
</Stream.Root>

Anatomy

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

<Stream.Field fallback={<Fallback />}>
  {/* Any content - shows fallback if contains undefined */}
</Stream.Field>

Examples

With Custom Fallback

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

<Stream.Field fallback={<Skeleton className="h-12 w-20 rounded-md" />}>
  <span className="text-5xl font-bold tabular-nums">
    {object?.temperature}°
  </span>
</Stream.Field>

Nested Content

Works with any JSX structure:

import { Droplets } from "lucide-react";

<Stream.Field fallback={<Skeleton className="h-6 w-24" />}>
  <div className="flex items-center gap-1.5">
    <Droplets className="h-4 w-4" />
    <span>{object?.humidity}%</span>
  </div>
</Stream.Field>

Multiple Values

If any value is undefined, the fallback shows:

<Stream.Field fallback={<Skeleton className="h-6 w-32" />}>
  <span>{object?.city}, {object?.country}</span>
</Stream.Field>

Without Fallback

If no fallback is provided, nothing renders until all values exist:

<Stream.Field>
  <OptionalContent value={object?.optional} />
</Stream.Field>

How It Works

Stream.Field recursively inspects its children:

If children contains undefined or null anywhere → render fallback
Otherwise → render children as-is

This means you can put any JSX inside and it "just works" with your typed object.

API Reference

Props

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

Stream.Field

On this page