Installation

Requirements

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

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

NPM Installation

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

npm install @rixl/videosdk-react

yarn add @rixl/videosdk-react

pnpm add @rixl/videosdk-react

bun add @rixl/videosdk-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 and upload your video or image files

Get Media ID

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

Use in Your App

Reference the media ID in your React components

2. Import the Components

import { Video, Image } from '@rixl/videosdk-react';

3. Use in Your Component

import { Video } from '@rixl/videosdk-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"
      />
    </div>
  );
}

Basic Implementation Example

Here's a complete example showing how to integrate RIXL components into a React application:

Complete App Example

import React from 'react';
import { Video, Image } from '@rixl/videosdk-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"
          autoPlay={false}
          muted={false}
          progressBar={true}
          allowFullscreen={true}
        />
      </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"
            alt="Featured content 1"
            className="aspect-square object-cover rounded-lg"
          />
          <Image
            id="featured-2"
            alt="Featured content 2"
            className="aspect-square object-cover rounded-lg"
          />
          <Image
            id="featured-3"
            alt="Featured content 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}
          loop={true}
          progressBar={false}
          allowPlayPause={false}
        />
        <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>
    </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 Video SDK installed and working:

Learn about Video Component properties and advanced features
Explore Image Component optimization options
Browse SDK Overview for complete documentation