1.0.3 • Published 4 years ago

simple-media-gallery v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

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}
           />;
       )
   }
PropTypeDescription
titleStringOptional. The title of the page.
mediaArrayRequired. Include objects in the array to create the media gallery.
media.nameStringRequired. Parameter for a media piece. This is the name of the image.
media.imageUrlStringRequired. Parameter for a media piece. This is the path to the image.
media.altStringRequired. Parameter for a media piece. This is the alt of the image.

Icons