Expertizo · hamsahmedansari · May 16, 2019 · May 16, 2019 · Aug 20, 2019 · Aug 20, 2019
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # 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.<br>
 
-
 ## Table of Contents
 
 - [What's new](#whats-new)
@@ -12,68 +12,101 @@ Below you will find some information on how to perform common tasks.<br>
 - [Pull Requests](#pr)
 - [License](#license)
 
+## What's new `v0.1.6`
 
-## What's new `v0.1.5`
-* Fixed key warning.
-
+- Added option to provide thumbnail.
 
 ## Demo
-![react-fb-image-grid](https://media.giphy.com/media/g04KayLmHrF5hqXzf6/giphy.gif)
 
+![react-fb-image-grid](https://media.giphy.com/media/g04KayLmHrF5hqXzf6/giphy.gif)
 
 ## Some Features Video
-https://youtu.be/HdEhsDNkw6s
 
+https://youtu.be/HdEhsDNkw6s
 
 ## Installation
 
 Run the following
+
 ```
 npm install react-fb-image-grid
 ```
+
 or
+
 ```
 yarn add react-fb-image-grid
 ```
 
 ## Basic Usage
 
+```jsx
+import FbImageLibrary from "react-fb-image-grid";
+
+<FbImageLibrary images={["img_01", "img_02", "..."]} />;
 ```
-import FbImageLibrary from 'react-fb-image-grid'
 
-<FbImageLibrary images={[]}/>
+or
+
+```jsx
+import FbImageLibrary from "react-fb-image-grid";
+
+<FbImageLibrary
+  images={[
+    { url: "img_01", thumbnail: "thumb_01" },
+    { url: "......", thumbnail: "........" }
+  ]}
+/>;
 ```
 
+or
 
-## Props
+```jsx
+import FbImageLibrary from 'react-fb-image-grid'
 
-Props | Type | Default | Example
-:--- | :---: | :---: | :---
-images | Array (String) | **required** | `{['https://some-url.com/image.jpg', importedImage]}` `//Local image should be imported first`
-countFrom | Number | 5 | `{2}`  `//Should be from 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}) => {}}`
+<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)** <br> OR <br> **Array (Object)** |      **required**       | `{['imgURL', 'imgURL', '...']}` <br> OR <br> `{[ {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](./LICENSE)
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,22 +1,123 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
-import '../../src/css/style.css';
-import FbImageLibrary from '../../src'
+import React, { Component } from "react";
+import { render } from "react-dom";
+import "../../src/css/style.css";
+import FbImageLibrary from "../../src";
 
-const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
-    'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
-    'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
-    'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
-    'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
-    "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
-    "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
+const images = [
+  "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350",
+  ,
+  "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg",
+  "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg",
+  "https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000"
+];
+
+const imgs = [
+  {
+    url:
+      "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg",
+    thumbnail:
+      "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000"
+  },
+  {
+    isVideo: true,
+    url:
+      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
+    props: {}
+    // thumbnail:
+    //   "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
+  },
+  {
+    isVideo: true,
+    url:
+      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
+    props: {}
+    // thumbnail:
+    //   "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  },
+  {
+    url: "https://www.youtube.com/embed/5dsGWM5XGdg",
+    iFrame: true,
+    props: {}
+    // thumbnail:
+    //   "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
+  }
+];
 
 class Demo extends Component {
-    render() {
-        return <div>
-            <FbImageLibrary images={images}/>
-        </div>
-    }
+  render() {
+    return (
+      <div>
+        {/* images can be 'images' or 'imgs' */}
+        <FbImageLibrary images={imgs} />
+      </div>
+    );
+  }
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));