Basic Usage

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/feeds
/>

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.

Localized Feed

function LocalizedFeed() {
  return (
    <div className="h-screen">
      <Feed feedId="your-feed-id" lang="de" />
    </div>
  );
}

Feed with Custom Font

function StyledFeed() {
  return (
    <div className="h-screen">
      <Feed feedId="your-feed-id" feedFont="proportional_sans" />
    </div>
  );
}

Best Practices

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

Container Height: Always provide a defined height on the feed's parent container (h-screen, h-full, or a fixed height). Without it, scroll snapping won't work correctly.

On This Page