react-fb-image-grid

An image library that's used to show the images in beautiful grids.

Below you will find some information on how to perform common tasks.

Table of Contents

• What's new
• Installation
• Props
• Pull Requests
• License

What's new v0.1.6

• Added option to provide thumbnail.

Demo

Some Features Video

https://youtu.be/HdEhsDNkw6s

Installation

Run the following

npm install react-fb-image-grid

or

yarn add react-fb-image-grid

Basic Usage

import FbImageLibrary from "react-fb-image-grid";

<FbImageLibrary images={["img_01", "img_02", "..."]} />;

or

import FbImageLibrary from "react-fb-image-grid";

<FbImageLibrary
  images={[
    { url: "img_01", thumbnail: "thumb_01" },
    { url: "......", thumbnail: "........" }
  ]}
/>;

or

import FbImageLibrary from 'react-fb-image-grid'

<FbImageLibrary images={[
  {url: 'video_01', thumbnail: 'thumb_01',isVideo:true},
  {url: 'video_02',isVideo:true},
  {url: 'Youtube/video_03',iFrame:true},
  {url: 'Youtube/video_02', thumbnail: 'thumb_02',iFrame:true},
  ...
]}/>

Props

Props	Type	Default	Example
images	Array (String) OR Array (Object)	required	{['imgURL', 'imgURL', '...']} OR {[ {url: 'imgURL, thumbnail: 'thumbnailURL'}, {url, '...', thumbnail: '...'} ]}
countFrom	Number	5	{2} - Should be between 1 to 5
hideOverlay	Boolean	false	{true}
renderOverlay	Function	() => 'Preview Image'	{() => <button>Show Image</button>}
overlayBackgroundColor	String	#222222	'green' or '#000000' or 'rgb(255, 26, 26)'
onClickEach	Function	null	{({src, index}) => {}}
isVideo	Boolean	false	{true}
iFrame	Boolean	true	{true}

Pull Requests

Feel free to make Pull Requests for your feature/fix. To run the project, run

npm install

or

yarn

then

npm start

License

MIT