Basic Usage

Learn how to implement the Feed component with common patterns and use cases

Importing the Feed Component

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

Essential Props

Every Feed component needs at minimum:

<Feed
  feedId="your-feed-id" // Required: Your feed ID from dash.rixl.com
/>

Simple Feed Example

Here's a basic implementation with common settings:

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

function BasicFeed() {
  return (
        <div className={`md:w-2/5 w-[90%] mx-auto h-screen`}>
            <Feed feedId={`id-from-dashboard`} />
        </div>
  );
}

Common Use Cases

function SocialFeed() {
  return (
    <main className="w-full h-screen bg-black">
      <Feed
        feedId="following-feed"
      />
    </main>
  );
}

See it in action: Check out the Standard Feed example for a complete feed implementation.

Best Practices

Mobile-First: Design your feed layout with mobile devices in mind, as most feed interactions happen on mobile platforms.

Suggest edits Raise issue

Overview

Infinite-scrolling TikTok-style feed for displaying RIXL content with automatic video playback

Props Reference

Complete API reference for all Feed component props and TypeScript interfaces