Package Exports

@rixl/videosdk-react
@rixl/videosdk-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rixl/videosdk-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/videosdk 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/videosdk-react
# or
pnpm add @rixl/videosdk-react
# or
bun add @rixl/videosdk-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/videosdk-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/videosdk-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/videosdk-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"
    />
  );
}