Installation

Requirements

Before installing the RIXL Media SDK for React, ensure your project meets these requirements:

React: 18.0 or higher
Node.js: 24.0 or higher
TailwindCSS: 4.0.9 or higher (recommended but optional)

NPM Installation

Install the RIXL Media SDK for React using your preferred package manager:

bash npm install @rixl/media-react

Setting Up Your First Video

1. Upload Your Media

Before using the SDK, you need to upload your media content:

Upload to Dashboard

Go to dash.rixl.com/videos for videos or dash.rixl.com/images for images

Get Media ID

Copy the generated media ID (e.g., "FU9aVtA88m")

Authenticate and Render

Call connect() if your app is standalone, then reference the media ID in your React components

2. Import the Components

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

3. Authenticate the SDK

All media fetches go through the shared @rixl/sdk HTTP client. Choose the mode that matches your app:

Embedded mode — your host app already calls @rixl/sdk's connect() for its own API calls. The media SDK will automatically use the same authenticated client, so you do not need to do anything extra.

Standalone mode — call connect() once, before rendering any media component, to exchange your API key for a Bearer token:

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

await connect({
  baseUrl: "https://api.rixl.com",
  apiKey: "your-rixl-api-key",
});

connect is re-exported from @rixl/media-react for convenience. You can also import it directly from @rixl/media.

4. Use in Your Component

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

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1>My First RIXL Video</h1>
      <Video id="D3OCjdLP60" className="w-full h-auto rounded-lg" analyticsPage="standalone" />
    </div>
  );
}

Need custom controls instead of the built-in player UI? Use the public Hooks inside a <VideoPlayer> scope. The player-scope hooks bind to the enclosing player scope, not directly to the Lit-backed <Video>.

Basic Implementation Example

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

function MediaShowcase() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      {/* Hero Video */}
      <section className="text-center">
        <h1 className="text-3xl font-bold mb-4">Welcome to Our Platform</h1>
        <Video id="FU9aVtA88m" className="w-full h-auto rounded-xl shadow-lg" />
      </section>

      {/* Image Gallery */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Featured Images</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <Image id="featured-1" className="aspect-square object-cover rounded-lg" />
          <Image id="featured-2" className="aspect-square object-cover rounded-lg" />
          <Image id="featured-3" className="aspect-square object-cover rounded-lg" />
        </div>
      </section>

      {/* Background Video */}
      <section className="relative h-96 rounded-xl overflow-hidden">
        <Video id="background-video" className="absolute inset-0 w-full h-full object-cover" autoPlay={true} muted={true} />
        <div className="relative z-10 flex items-center justify-center h-full">
          <h2 className="text-4xl font-bold text-white text-center">Beautiful Background Video</h2>
        </div>
      </section>

      {/* Feed */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Latest Posts</h2>
        <Feed feedId="latest-posts" analyticsPage="feed" />
      </section>
    </div>
  );
}

export default MediaShowcase;

Styling Setup (Optional)

With TailwindCSS

If you're using TailwindCSS (recommended), the examples above will work out of the box. Ensure TailwindCSS is properly configured in your project.

Without TailwindCSS

You can use regular CSS classes or CSS-in-JS solutions:

// Using regular CSS classes
<Video
  id="D3OCjdLP60"
  className="custom-video-player"
/>

<Image
  id="hero-image"
  className="custom-image"
/>

/* styles.css */
.custom-video-player {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

Troubleshooting

Media not loading? - Verify your media ID is correct - Check that the media exists in your RIXL dashboard - Ensure you have proper network connectivity

TypeScript errors? - Ensure you're using React 18+ - Update your @types/react package if needed

Style issues? - Check that your CSS framework is properly configured - Verify className props are being applied correctly

What's Next?

Now that you have the RIXL Media SDK installed and working:

Learn about Video Component properties and advanced features
Explore Hooks when you want custom controls or player state
Explore Image Component optimization options
Browse SDK Overview for complete documentation

On this page