Web Media Viewer

A React based viewer, inspired from the React Spring View Pager Example for different types of web media.

Getting Started

Web Media Viewer requires React.

Installation

1
2npm install web-media-viewer
3
4# or
5
6yarn add web-media-viewer
7

Basic Usage

1import * as React from 'react';
2import { createRoot } from 'react-dom/client';
3import MediaViewer from 'web-media-viewer';
4
5const App = () => {
6  return (
7    <MediaViewer
8      items={[
9        {
10          url: "https://picsum.photos/id/12/2500/1667",
11          title: "Paul Jarvis",
12          type: "image" // required if the image link is not a direct link
13        },
14        {
15          url: "https://images.pexels.com/photos/2399391/pexels-photo-2399391.jpeg",
16          title: "<div><b>Photo of People Near Clock Tower During Daytime</b><p>Bern, BE, Switzerland</p><div>"
17        },
18        {
19          url: "https://www.youtube.com/watch?v=linlz7-Pnvw", // Auto-embed Youtube/Vimeo links
20          title: "Switzerland in 8K ULTRA HD HDR - Heaven of Earth (60 FPS)"
21        },
22        {
23          url: "https://images.pexels.com/photos/1608966/pexels-photo-1608966.jpeg",
24          title: "<div><b>Green Trees</b><p>Lauterbrunnen, BE, Switzerland</p><div>"
25        },
26      ]}
27      galleryName="Switzerland's Best"
28    />
29  );
30};
31
32const root = createRoot(document.body);
33root.render(<App />);
34

Required & Optional Props

MediaViewerProps:

items prop requires an array of items with URL.

prop	value
items (required)	ItemProp[ ]
galleryName	string

ItemProp:

Each item must contain a url key. Optionally, you can pass a title and/or thumbnail url.

prop	value
url (required)	string
title	string | HTML
thumbnail	string
type (required if url is NOT a direct link)	string

---

License

MIT