Package Exports

react-mua-gallery
react-mua-gallery/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mua-gallery) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-mua-gallery

A modern React gallery component with adaptive preview modes (split pane on desktop, fullscreen on smaller screens).

Features

React 16.8+ through React 19 support
Adaptive preview UX: split pane and fullscreen dialog
Keyboard navigation (ArrowLeft, ArrowRight, Escape)
Typed callback props for header and preview actions
Vite-powered example build and library build

Installation

npm install react-mua-gallery

pnpm add react-mua-gallery

Quick Start

import { Gallery } from 'react-mua-gallery';

export default function App() {
  return <Gallery />;
}

Configurable Props

Gallery is a named export and accepts the following props:

type GalleryProps = {
  galleryTitle?: string;
  onSearch?: () => void;
  onFilter?: () => void;
  onAccount?: () => void;
  onPreviewMore?: (item: GalleryItem) => void;
  onPreviewFavorite?: (item: GalleryItem) => void;
  onPreviewDownload?: (item: GalleryItem) => void;
  onPreviewInfo?: (item: GalleryItem) => void;
  onPreviewShare?: (item: GalleryItem) => void;
  onPreviewDelete?: (item: GalleryItem) => void;
};

Example With Actions

import { Gallery } from 'react-mua-gallery';

export default function App() {
  return (
    <Gallery
      galleryTitle="React MUA Gallery"
      onSearch={() => console.log('search')}
      onFilter={() => console.log('filter')}
      onAccount={() => console.log('account')}
      onPreviewMore={(item) => console.log('more', item.id)}
      onPreviewFavorite={(item) => console.log('favorite', item.id)}
      onPreviewDownload={(item) => console.log('download', item.src)}
      onPreviewInfo={(item) => console.log('info', item.title)}
      onPreviewShare={(item) => console.log('share', item.id)}
      onPreviewDelete={(item) => console.log('delete', item.id)}
    />
  );
}

Exports

Main export:

Gallery

Additional exports:

BottomNav
FullscreenPreviewDialog
GalleryGrid
GalleryHeader
GalleryItemCard
GallerySection
Icon
IconButton
PreviewImage
PreviewMetadata
PreviewToolbar
SplitPreviewPane
CATEGORIES, GALLERY_GROUPS, GALLERY_ITEMS
useGalleryState, useKeyboardNav, useViewportMode

Development

pnpm install
pnpm dev

Build

Library build:

pnpm run build:lib

Static example build:

pnpm run build:example

JSPM