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

• Basic Usage - How to use ChannelFeed

• Customization - Styling and customization

• Components Overview - Other available components

Core Concepts:

• Authentication Flow - How auth affects the component

• Provider Pattern - Context management