Installation
Install and configure RIXL Media SDK for React in your project
Install and configure RIXL Media SDK for React in your project
Before installing the RIXL Media SDK for React, ensure your project meets these requirements:
Install the RIXL Media SDK for React using your preferred package manager:
bash npm install @rixl/media-react 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
import {Video, Image, Feed} from "@rixl/media-react";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.
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>.
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;If you're using TailwindCSS (recommended), the examples above will work out of the box. Ensure TailwindCSS is properly configured in your project.
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;
}Media not loading? - Verify your media ID is correct - Check that the media exists in your RIXL dashboard - Ensure you have proper network connectivity
@types/react package if neededStyle issues? - Check that your CSS framework is properly configured - Verify className props are being applied correctly
Now that you have the RIXL Media SDK installed and working: