@rezaan6/media-gallery

Reusable React media gallery component with image and video support.

What is included

• MediaGallery
• public types such as MediaGalleryProps and MediaItem
• internal crop, trim, preview, and thumbnail logic already wired together

Package shape

gallery-component/
  package.json
  tsconfig.json
  tsconfig.build.json
  vitest.config.ts
  vite.config.ts
  src/
    index.ts
    media-gallery/
    ui/

Install

npm install react react-dom lucide-react @radix-ui/react-slider @radix-ui/react-slot class-variance-authority clsx
npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

Build

npm install
npm run test
npm run build

Usage

import { useState } from "react";
import { MediaGallery, type MediaItem } from "@rezaan6/media-gallery";

export function Example() {
  const [items, setItems] = useState<MediaItem[]>([]);

  return (
    <MediaGallery
      items={items}
      onChange={setItems}
      allowVideo
      enableCrop
    />
  );
}

Notes before publishing

• The component keeps the existing Tailwind-style class names from the app extraction.
• The host app must provide compatible utility classes and design tokens for the visual styling shown in the extracted component.
• Keep the src/ui helpers with the package because the gallery depends on them.

Publish

npm login
npm version patch
npm publish