simple-media-gallery

Simple Media Gallery Package

Usage no npm install needed!

<script type="module">
  import simpleMediaGallery from 'https://cdn.skypack.dev/simple-media-gallery';
</script>

README

Simple Media Gallery

Simple Media Gallery is an open-source React.js component. It is a ready to use click-through media gallery.

Preview

MediaExample

Install

npm install simple-media-gallery

Import and use the Component

import MediaGallery from "simple-media-gallery";

<MediaGallery
    media={media} 
    title={title}
/>;

Pass in your title and media as props

  • title is a string and the name of the page
  • media is an array with objects where the parameter name is a string, the parameter imageUrl is a string, and the parameter alt is a string

The render might look like this

import Lusia from "./Lusia.jpg";

...
   render() {
       const title = "Cats";
       const media = [
           {   
               name: "Lusia",
               imageUrl: Lusia,
               alt: "Lusia"
           },
           {   
               name: "Sleepy",
               imageUrl: Sleepy,
               alt: "Sleepy"
           },
           {   
               name: "Best Friends",
               imageUrl: BestFriends,
               alt: "BestFriends"
           },
           {   
               name: "Fiona",
               imageUrl: Fiona,
               alt: "Fiona"
           },
           {   
               name: "Give Me Food",
               imageUrl: GiveMeFood,
               alt: "GiveMeFood"
           }
       ];

       return (
           <MediaGallery
               media={media} 
               title={title}
           />;
       )
   }
Prop Type Description
title String Optional. The title of the page.
media Array Required. Include objects in the array to create the media gallery.
media.name String Required. Parameter for a media piece. This is the name of the image.
media.imageUrl String Required. Parameter for a media piece. This is the path to the image.
media.alt String Required. Parameter for a media piece. This is the alt of the image.

Icons