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
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 />);
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
