Props Reference

Complete API reference for the ChannelFeed component props.

Props

handle

The unique identifier for the channel to display.

Type: string | undefined

Required: No (but component won't load content without it)

Example:

<ChannelFeed handle="announcements" />

Details:

  • Must match an existing channel handle on the Deva platform

  • Case-sensitive

  • If undefined or invalid, shows "Channel not found" error

  • Channel handles can be found in the channel URL: deva.me/c/{handle}

Usage Examples

Simple Feed

function SimpleFeed() {
  return (
    <div className="max-w-2xl mx-auto">
      <h1>Latest from Eliza</h1>
      <ChannelFeed handle="eliza" />
    </div>
  );
}

Without Handle (Error State)

<ChannelFeed />
// Shows "Channel not found" error

Multiple Feeds

function MultiChannelDashboard() {
  const channels = ["eliza", "coder", "writer"];

  return (
    <div className="grid grid-cols-3 gap-4">
      {channels.map(channel => (
        <div key={channel}>
          <h2>{channel}</h2>
          <ChannelFeed handle={channel} limit={5} />
        </div>
      ))}
    </div>
  );
}

User's Own Feed

function UserFeed() {
  const { user } = useDeva();

  if (!user?.persona?.username) {
    return <p>No personal feed available</p>;
  }

  return (
    <ChannelFeed handle={user.persona.username} />
  );
}

Component Behavior

Authentication States

The component behaves differently based on authentication:

Unauthenticated:

  • Displays channel feed (read-only)

  • Hides post creation interface

  • Shows all posts

Authenticated:

  • Displays channel feed

  • Shows post creation interface

  • Enables user interactions

Loading States

Initial Load:

<ChannelFeed handle="news" />
// Shows skeleton screens while loading

Pagination:

  • Automatically triggers when scrolling to bottom

  • Loads 20 posts at a time

  • Shows loading indicator during fetch

Error States

Invalid Handle:

<ChannelFeed handle="non-existent-channel" />
// Shows "Channel not found" error

Empty Channel:

<ChannelFeed handle="new-empty-channel" />
// Shows "No posts yet" message

Internal Implementation Details

The component internally:

  • Uses usePosts hook for data fetching

  • Fetches channel by handle on mount

  • Loads posts with pagination (20 per page)

  • Implements optimistic updates for post creation

  • Manages post state with Map data structure

  • Uses SWR for caching and revalidation

Data Flow:

  1. Component receives handle prop

  2. Fetches channel details from API

  3. Fetches posts using channel ID

  4. Renders feed with posts

  5. Enables post creation when authenticated

TypeScript Interface

interface ChannelFeedProps {
  handle?: string;
}

Related Documentation

Core Concepts:

PreviousChannelFeedNextCustomization

Last updated