@bernierllc/media-library-ui

React media library component with grid/list views, filtering, and upload support.

Features

• Grid and list view modes
• File filtering by type and search
• Drag-and-drop file upload
• Multi-select support
• Responsive design
• Accessible keyboard navigation
• Customizable styling

Installation

npm install @bernierllc/media-library-ui react react-dom

Usage

import { MediaLibrary, MediaAsset } from '@bernierllc/media-library-ui';

const assets: MediaAsset[] = [
  {
    id: '1',
    name: 'photo.jpg',
    type: 'image',
    url: 'https://example.com/photo.jpg',
    thumbnailUrl: 'https://example.com/thumb.jpg',
    size: 1024000,
    mimeType: 'image/jpeg',
    createdAt: new Date(),
  },
];

function App() {
  const handleSelect = (selectedAssets: MediaAsset[]) => {
    console.log('Selected:', selectedAssets);
  };

  const handleUpload = async (files: File[]) => {
    // Upload files and return MediaAsset objects
    return Promise.resolve([]);
  };

  return (
    <MediaLibrary
      assets={assets}
      onSelect={handleSelect}
      onUpload={handleUpload}
      multiSelect={true}
      enableUpload={true}
      viewMode="grid"
      columns={4}
      maxFileSize={10 * 1024 * 1024}
    />
  );
}

Props

MediaLibrary

| Prop | Type | Default | Description | |------|------|---------|-------------| | assets | MediaAsset[] | Required | Array of media assets to display | | onSelect | (assets: MediaAsset[]) => void | - | Callback when assets are selected | | onUpload | (files: File[]) => Promise<MediaAsset[]> | - | Callback for file uploads | | onDelete | (assetIds: string[]) => Promise<void> | - | Callback for asset deletion | | multiSelect | boolean | false | Enable multiple asset selection | | acceptedTypes | string[] | ['image/*', 'video/*', 'audio/*'] | Accepted file types for upload | | viewMode | 'grid' \| 'list' | 'grid' | Initial view mode | | enableUpload | boolean | true | Show upload dropzone | | maxFileSize | number | 10485760 (10MB) | Maximum file size in bytes | | columns | number | 4 | Number of columns in grid view |

MediaAsset

interface MediaAsset {
  id: string;
  name: string;
  type: 'image' | 'video' | 'audio' | 'document';
  url: string;
  thumbnailUrl?: string;
  size: number;
  mimeType: string;
  createdAt: Date;
  metadata?: Record<string, unknown>;
}

Components

MediaLibrary

Main component that orchestrates the media library functionality.

AssetCard

Grid view card component displaying media assets.

AssetListItem

List view item component displaying media assets.

MediaUploader

Drag-and-drop file upload component.

FilterBar

Search and filter controls component.

Hooks

useMediaLibrary

Custom hook for managing media library state.

const {
  selectedAssets,
  viewMode,
  filterOptions,
  setViewMode,
  setFilterOptions,
  toggleAssetSelection,
  selectAsset,
  clearSelection,
  filteredAssets,
} = useMediaLibrary(assets, { multiSelect: true, initialViewMode: 'grid' });

Accessibility

• Full keyboard navigation support
• ARIA labels and roles
• Screen reader friendly
• Semantic HTML structure

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Copyright (c) 2025 Bernier LLC