Props Reference

Core Props

`id` (Required)

Type: string

The unique image identifier from your RIXL dashboard. Upload your image to dash.rixl.com to get this ID.

<Image id="your-image-id" />

`alt` (Recommended)

Type: string | Default: undefined

Alternative text for accessibility. Describes the image content for screen readers and displays when the image fails to load.

<Image id="your-image-id" alt="A sunset over the mountains" />

Good alt text is descriptive but concise. Avoid "image of" or "picture of" - screen readers already announce it's an image.

`className` (Optional)

Type: string | Default: undefined

CSS classes for styling the image container. Supports all CSS frameworks including TailwindCSS.

<Image
  id="your-image-id"
  className="object-contain w-full h-full rounded-lg shadow-md"
/>

Analytics

`analytics` (Optional)

Type: boolean | Default: true

Enables built-in view tracking for images. When enabled, the SDK automatically tracks image impressions.

<Image id="your-image-id" analytics={true} />

`analyticsPage` (Optional)

Type: "feed" | "standalone" | "profile" | Default: "standalone"

Specifies the page context for analytics reporting. This helps segment your analytics data by where the image is being viewed.

<Image id="your-image-id" analyticsPage="profile" />

Available Contexts:

'standalone' - Image on its own dedicated page
'feed' - Image within a scrolling feed
'profile' - Image on a user profile page

TypeScript Interface

interface ImageProps extends HTMLProps<HTMLImageElement> {
  id?: string;
  alt?: string;
  className?: string;
  analytics?: boolean;
  analyticsPage?: "feed" | "standalone" | "profile";
}