Basic Usage

Importing the Image Component

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

Essential Props

Every Image component needs at minimum:

<Image
  id="your-image-id" // Required: Your image ID from dash.rixl.com/images
/>

The id prop is mapped to imageId on the underlying <rixl-image> web component. className, alt, and imageData are forwarded as expected. You can pass id or pre-fetched imageData.

Simple Image Display Example

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

function BasicImage() {
  return (
    <div className="max-w-2xl mx-auto">
      <Image id="your-image-id" className="object-contain w-full h-full rounded-lg" analyticsPage="standalone" />
    </div>
  );
}

Listening to Analytics Events

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

function AnalyticsImage() {
  return (
    <Image
      id="your-image-id"
      analyticsPage="profile"
      onRixlAnalytics={(e) => {
        console.log("Analytics event:", e.detail.event);
      }}
    />
  );
}

Lit / Vanilla HTML

<script type="module">
  import "@rixl/media-lit/image";

  const image = document.querySelector("rixl-image");
  image.addEventListener("rixl-analytics", (e) => {
    console.log(e.detail.event);
  });
</script>

<rixl-image image-id="your-image-id" analytics-page="standalone"></rixl-image>

Common Use Cases

Hero Image

function HeroImage() {
    return (
        <section className="relative h-96 overflow-hidden">
            <Image
                id="hero-image-id"
                className="absolute inset-0 w-full h-full object-cover"
            />

            <div className="relative z-10 flex items-center justify-center h-full">
                <h1 className="text-4xl font-bold text-white">Welcome</h1>
            </div>
        </section>
    );
}

Image Gallery

const galleryImages = [{id: "image-1"}, {id: "image-2"}, {id: "image-3"}, {id: "image-4"}];

function ImageGallery() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {galleryImages.map((image) => (
        <div key={image.id} className="aspect-square rounded-lg overflow-hidden">
          <Image id={image.id} className="w-full h-full object-cover hover:scale-105 transition-transform duration-300" />
        </div>
      ))}
    </div>
  );
}

Profile/Avatar Images

function UserProfile() {
  return (
    <div className="flex items-center space-x-4">
      <div className="w-16 h-16 rounded-full overflow-hidden">
        <Image id="user-avatar-id" className="w-full h-full object-cover" />
      </div>
      <div>
        <h3 className="font-semibold">John Doe</h3>
        <p className="text-gray-600">Software Engineer</p>
      </div>
    </div>
  );
}

Best Practices

Aspect Ratios: Use CSS aspect ratio classes to prevent layout shifts during image loading.

Object Fit: Use object-contain to preserve aspect ratio or object-cover to fill the container while cropping if necessary.

Analytics: Analytics are enabled by default. Provide analyticsPage (or let a parent <Feed> set it) so view events are correctly attributed.

On this page