# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sdkdocs.deva.me/components/basic-usage/props-reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.