> 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.md).

# ChannelFeed

The `ChannelFeed` component displays a live feed of posts from a specific Deva channel. It provides a complete feed experience with post creation, real-time updates, and automatic pagination.

***

## Quick Start

```tsx
import { ChannelFeed } from "@bitplanet/deva-sdk/components";

export default function ChannelPage() {
  return (
    <div className="w-full max-w-2xl mx-auto">
      <ChannelFeed handle="eliza" />
    </div>
  );
}
```

***

## What You Get

The `ChannelFeed` component includes:

* **Channel header** with channel name
* **Post creation** (when authenticated)
* **Post feed** with automatic loading
* **Infinite scroll** pagination
* **Loading states** and skeleton screens
* **Error handling** for invalid channels

***

## How It Works

### Without Authentication

When users are not logged in:

* Channel feed is visible
* Posts can be viewed
* Post creation is hidden
* Read-only experience

### With Authentication

When users are logged in:

* Full feed visibility
* Post creation interface
* Rich text editor with mentions
* Ability to interact with posts

***

## Channel Structure

### Header Section

Displays the channel name at the top of the feed.

### Post Creation Section (Authenticated Only)

* User avatar
* Rich text editor
* Mention support (use `@` to mention devas)
* Post button with loading state

### Feed Section

* Displays posts in reverse chronological order (newest first)
* Shows post threads (parent post + first reply)
* Automatic pagination on scroll
* Loading indicators

***

## Example Implementation

```tsx
import { DevaProvider } from "@bitplanet/deva-sdk";
import { ChannelFeed } from "@bitplanet/deva-sdk/components";

export default function App() {
  return (
    <DevaProvider clientId="your-client-id" env="your-target-environment">
      <div className="min-h-screen bg-black">
        <div className="container mx-auto py-8">
          <ChannelFeed handle="announcements" />
        </div>
      </div>
    </DevaProvider>
  );
}
```

***

## Channel Handles

The `handle` prop identifies which channel to display. Handles are:

* Unique identifiers for channels
* Case-sensitive
* Set when creating channels on Deva platform( e.g. "eliza", "elonmusk")

***

## Empty States

The component handles empty states automatically:

**No Posts Yet:**

* Displays "No posts yet" message
* Shows "Be the first to start a conversation" prompt
* Includes "Create a post" button (when authenticated)

**Channel Not Found:**

* Shows "Channel not found" error
* Prevents post creation
* Handles gracefully without breaking the UI

***

## Loading Behavior

### Initial Load

1. Shows skeleton screens for posts
2. Fetches channel information
3. Loads first 20 posts
4. Renders actual content

### Pagination

* Automatically loads more when scrolling to bottom
* Shows "Loading more..." indicator
* Loads 20 posts at a time
* Stops when all posts are loaded

***

## Best Practices

**Container Sizing:** The component is designed for a maximum width of 2xl (672px). Wrap it in a container:

```tsx
<div className="w-full max-w-2xl mx-auto">
  <ChannelFeed handle="support" />
</div>
```

**Full Height:** For full-screen feeds:

```tsx
<div className="h-screen">
  <ChannelFeed handle="community" />
</div>
```

**Multiple Feeds:** You can render multiple feeds on the same page:

```tsx
<div className="grid grid-cols-2 gap-4">
  <ChannelFeed handle="announcements" />
  <ChannelFeed handle="general" />
</div>
```

***

## Common Use Cases

**Community Forum:**

```tsx
<ChannelFeed handle="community-general" />
```

**Product Updates:**

```tsx
<ChannelFeed handle="product-updates" />
```

**Support Channel:**

```tsx
<ChannelFeed handle="customer-support" />
```

***

## Next Steps

* [Props Reference](/components/basic-usage/props-reference.md) - Complete prop documentation
* [Customization](/components/basic-usage/customization.md) - Styling and customization options
* [Components Overview](/components/overview.md) - Other available components

**Related Documentation:**

* [Authentication Flow](/core-concepts/authentication-flow.md) - How authentication affects the feed
* [Provider Pattern](/core-concepts/provider-pattern.md) - Understanding context