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

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

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:

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

Full Height: For full-screen feeds:

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

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

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

---

Common Use Cases

Community Forum:

<ChannelFeed handle="community-general" />

Product Updates:

<ChannelFeed handle="product-updates" />

Support Channel:

<ChannelFeed handle="customer-support" />

---

Next Steps

• Props Reference - Complete prop documentation

• Customization - Styling and customization options

• Components Overview - Other available components

Related Documentation:

• Authentication Flow - How authentication affects the feed

• Provider Pattern - Understanding context