Web-media-viewer NPM

Getting Started

Web Media Viewer requires React.

Installation

npm install web-media-viewer

# or

yarn add web-media-viewer

Basic Usage

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import MediaViewer from 'web-media-viewer';

const App = () => {
  return (
    <MediaViewer
      items={[
        {
          url: "https://picsum.photos/id/12/2500/1667",
          title: "Paul Jarvis",
          type: "image" // required if the image link is not a direct link
        },
        {
          url: "https://images.pexels.com/photos/2399391/pexels-photo-2399391.jpeg",
          title: "<div><b>Photo of People Near Clock Tower During Daytime</b><p>Bern, BE, Switzerland</p><div>"
        },
        {
          url: "https://www.youtube.com/watch?v=linlz7-Pnvw", // Auto-embed Youtube/Vimeo links
          title: "Switzerland in 8K ULTRA HD HDR - Heaven of Earth (60 FPS)"
        },
        {
          url: "https://images.pexels.com/photos/1608966/pexels-photo-1608966.jpeg",
          title: "<div><b>Green Trees</b><p>Lauterbrunnen, BE, Switzerland</p><div>"
        },
      ]}
      galleryName="Switzerland's Best"
    />
  );
};

const root = createRoot(document.body);
root.render(<App />);