Four coordinated views

Keep the same collection and selection while the presentation changes.

Available features

Selection, responsive detail and extensible media rendering.

Working example

Mount a thumbnail browser in an explicitly sized container.

import { MediaSlide } from 'react-mediaslide';

const gallery = [{
  id: 'movement-map',
  title: 'DanceRudiments movement map',
  thumb: '/media/movement-map-thumb.webp',
  full: '/media/movement-map.webp',
  linkUrl: '/media/movement-map.webp',
  metadata: { files: [] },
}];

export function Gallery() {
  return <div style={{ height: '75vh' }}>
    <MediaSlide
      gallery={gallery}
      loading={false}
      pagination={{ page: 0, totalPages: 1 }}
      defaultDisplayType="thumbnails"
      onLoadMoreData={({ page }, direction) => console.log(page, direction)}
      selectionChange={(item) => console.log(item.id)}
      renderBigInfo={(item) => <article><h2>{item.title}</h2></article>}
      renderFile={async () => null}
    />
  </div>;
}

The parent needs an explicit height because MediaSlide fills it. Keep item IDs stable across page loads.

Integration contract

Check the released, installed and imported identities.

npm install react-mediaslide

GitHub v1.1.26 contains the current documentation and reliability fixes. At preparation time the npm dist-tag still reports 1.0.24 because npm publication credentials are unavailable; do not describe npm as current until its registry entry is verified.

For people and coding agents.