React SDK

6 drop-in components for video playback, uploads, images, and galleries.

Installation

bash

npm install @mediakit-dev/react

Setup: MediaKitProvider

Wrap your app with the provider to configure the API base URL:

app/providers.tsx

import { MediaKitProvider } from '@mediakit-dev/react'

export function Providers({ children }) {
  return (
    <MediaKitProvider config={{
      baseUrl: 'https://mediakitapi.gritcms.com',
      // Optional: for authenticated uploads
      getToken: () => localStorage.getItem('token'),
    }}>
      {children}
    </MediaKitProvider>
  )
}

Components

1. VideoPlayer

HLS adaptive player with auto quality switching:

tsx

import { VideoPlayer } from '@mediakit-dev/react'

<VideoPlayer
  videoId="1"
  autoPlay={false}
  muted={false}
  controls={true}
  className="rounded-lg overflow-hidden"
/>

// Or with a direct HLS URL:
<VideoPlayer
  src="https://r2.../videos/1/master.m3u8"
  poster="https://r2.../videos/1/thumbnail.jpg"
/>

Props

Prop	Type	Description
videoId	string	Fetch playback info from API
src	string	Direct HLS/MP4 URL
poster	string	Thumbnail image URL
autoPlay	boolean	Auto-start playback
onPlay	() => void	Play event callback
onEnded	() => void	Video ended callback

2. VideoUploader

tsx

import { VideoUploader } from '@mediakit-dev/react'

<VideoUploader
  onUploadComplete={(asset) => {
    console.log('Uploaded:', asset.id, asset.title);
  }}
  onProgress={(percent) => {
    console.log(`${percent}% uploaded`);
  }}
  maxSizeMB={5120}
  accept="video/mp4,video/webm,video/quicktime"
/>

3. MediaImage

Renders transformed images with lazy loading and blur placeholder:

tsx

import { MediaImage } from '@mediakit-dev/react'

<MediaImage
  assetId="42"
  width={800}
  height={600}
  fit="cover"
  format="webp"
  quality={85}
  alt="Product photo"
  className="rounded-lg"
/>

// Generates: /api/img/42?w=800&h=600&fit=cover&format=webp&q=85
// Automatically shows a blurred 20px placeholder while loading

4. ImageUploader

tsx

import { ImageUploader } from '@mediakit-dev/react'

<ImageUploader
  onUploadComplete={(asset) => {
    console.log('Image uploaded:', asset.id);
  }}
  accept="image/jpeg,image/png,image/webp"
  maxSizeMB={50}
/>

5. EmbedCode

Generates copyable embed snippets:

tsx

import { EmbedCode } from '@mediakit-dev/react'

<EmbedCode
  videoId="1"
  type="script"  // "script" | "iframe" | "hls"
/>

6. MediaGallery

Grid gallery with lightbox and infinite scroll:

tsx

import { MediaGallery } from '@mediakit-dev/react'

<MediaGallery
  assets={[
    { id: "1", type: "video", title: "Demo", thumbnail: "/thumb.jpg" },
    { id: "2", type: "image", title: "Photo", thumbnail: "/photo.jpg" },
  ]}
  columns={3}
  onSelect={(asset) => console.log('Selected:', asset.id)}
/>

Full Example

app/videos/[id]/page.tsx

import { MediaKitProvider, VideoPlayer, EmbedCode } from '@mediakit-dev/react'

export default function VideoPage({ params }) {
  return (
    <MediaKitProvider config={{ baseUrl: process.env.NEXT_PUBLIC_API_URL }}>
      <div className="max-w-4xl mx-auto py-8">
        <VideoPlayer videoId={params.id} />

        <div className="mt-8">
          <h2>Embed this video</h2>
          <EmbedCode videoId={params.id} type="script" />
        </div>
      </div>
    </MediaKitProvider>
  )
}

← Private Assets Embed Script