> For the complete documentation index, see [llms.txt](https://sdkdocs.deva.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdkdocs.deva.me/components/basic-usage/props-reference.md).

# 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:**

```tsx
<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

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

### Without Handle (Error State)

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

### Multiple Feeds

```tsx
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

```tsx
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:**

```tsx
<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:**

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

**Empty Channel:**

```tsx
<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

```typescript
interface ChannelFeedProps {
  handle?: string;
}
```

***

## Related Documentation

* [Basic Usage](/components/basic-usage.md) - How to use ChannelFeed
* [Customization](/components/basic-usage/customization.md) - Styling and customization
* [Components Overview](/components/overview.md) - Other available components

**Core Concepts:**

* [Authentication Flow](/core-concepts/authentication-flow.md) - How auth affects the component
* [Provider Pattern](/core-concepts/provider-pattern.md) - Context management