# 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


---

# 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.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.