Feed: Standard Feed

Simple implementation of an infinite-scrolling feed with automatic video playback

The standard feed provides a TikTok-style vertical scrolling experience with automatic video playback. This is the most common implementation for social media platforms and content discovery apps.

Live Example

Complete Implementation

import { Feed } from '@rixl/videosdk-react';

export default function FeedPage() {
  return (
    <div className="h-screen">
      <Feed feedId="HhUQ5uOQjI" />
    </div>
  );
}

The feed automatically handles infinite scrolling, video playback, and touch gestures. No additional configuration needed.

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="HhUQ5uOQjI" />
      </div>
    </div>
  );
}

With Navigation

Add simple tab navigation between different feeds:

import { useState } from 'react';
import { Feed } from '@rixl/videosdk-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}
        />
      </div>
    </div>
  );
}

Best Practices

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

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

Suggest editsRaise issue