Feed: Standard Feed

The standard feed provides a vertical scrolling experience of image and video posts. This is the most common implementation for social media platforms and content discovery apps.

Live Example

Complete Implementation

import {Feed} from "@rixl/media-react";

export default function FeedPage() {
  return (
    <div className="h-screen">
      <Feed feedId="your-feed-id" analyticsPage="feed" onRixlAnalytics={(e) => console.log(e.detail.event)} />
    </div>
  );
}

The feed automatically handles pagination, scroll-based video playback, and child image/video analytics. No additional configuration needed for basic usage.

Centered Layout

Center the feed with a max width for better mobile and desktop experience:

export default function FeedPage() {
  return (
    <div className="h-[500px] bg-black">
      <div className="w-1/2 mx-auto h-full">
        <Feed feedId="your-feed-id" analyticsPage="feed" />
      </div>
    </div>
  );
}

Add simple tab navigation between different feeds:

import {useState} from "react";
import {Feed} from "@rixl/media-react";

export default function FeedWithTabs() {
  const [activeTab, setActiveTab] = useState("following");

  return (
    <div className="flex flex-col h-screen bg-black">
      {/* Tabs */}
      <nav className="flex border-b border-gray-800">
        <button
          onClick={() => setActiveTab("following")}
          className={`flex-1 py-4 ${activeTab === "following" ? "text-white" : "text-gray-500"}`}
        >
          Following
        </button>
        <button onClick={() => setActiveTab("foryou")} className={`flex-1 py-4 ${activeTab === "foryou" ? "text-white" : "text-gray-500"}`}>
          For You
        </button>
      </nav>

      {/* Feed */}
      <div className="flex-1">
        <Feed key={activeTab} feedId={activeTab} analyticsPage="feed" />
      </div>
    </div>
  );
}

Autoscroll

Enable automatic post advancement:

<Feed feedId="your-feed-id" analyticsPage="feed" autoscroll={true} loop={true} />

Best Practices

Container Height: Always use h-screen or h-full on the container for proper scrolling.

Analytics: Use onRixlAnalytics on the <Feed> to capture feed-level interactions and child image/video events in a single handler.

Centered Layout: Use mx-auto with md:w-2/5 w-[90%] for a mobile-friendly centered feed.