RIXL Video SDK for React

The RIXL Video SDK for React provides ready-to-use React components for displaying and interacting with RIXL media content. Built on top of the @rixl/media core package.

Library provides components for displaying images, videos, and infinite-scrolling feeds, as well as hooks for custom implementations. The components are built on top of the core SDK and provide a seamless integration with React applications.

Use of this SDK is subject to our Terms of Use.

Installation

In your React project, install the Video SDK for React:

npm install @rixl/media-react
# or
pnpm add @rixl/media-react
# or
bun add @rixl/media-react

Requirements

• React 18 or higher
• TailwindCSS 4.0.9 or higher

Core Components

| Component | Description | | ----------- | -------------------------------------------------------------------------------- | | <Image /> | Display an image with automatic optimization, lazy loading and thumbhash support | | <Video /> | Feature-rich video player for RIXL videos | | <Feed /> | Infinite-scrolling feed component |

Image Component

Display images from the RIXL platform with automatic optimization and lazy loading:

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

function MyComponent() {
  return <Image id="your-image-id" alt="Description of the image" width={800} height={600} className="rounded-lg" />;
}

Video Player

A feature-rich video player for RIXL videos:

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

function MyComponent() {
  return (
    <Video
      id="your-video-id"
      // RIXL Video Player props
      progressBar={true}
      allowPlayPause={true}
      allowFullscreen={true}
      allowPictureInPicture={true}
      volume={1.0}
      theme="default"
      // HTMLVideoElement props
      autoPlay={false}
      controls={true}
      loop={false}
      muted={false}
      className="rounded-lg"
    />
  );
}

Feed Component

Display an infinite-scrolling feed of content:

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

function MyComponent() {
  return (
    <Feed
      feedId="your-feed-id"
      // loads specific creator's feed
      creatorId="your-creator-id"
      // opens feed at position of selected post
      startPostId="your-start-post-id"
    />
  );
}

Documentation

For complete documentation, tutorials, and examples, visit our SDK Documentation.

Need Help?

• Developer Support
• Developer Forum
• Premier Developer Support (priority support)