simple-media-gallery
Version:
Simple Media Gallery Package
83 lines (68 loc) • 2.33 kB
Markdown
# Simple Media Gallery
Simple Media Gallery is an open-source React.js component. It is a ready to use click-through media gallery.
## Preview
## 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. |
