Demo

See Demo Here

How to Use

Install react-picture-grid as dependency

npm i react-picture-grid --save

or if you use yarn

yarn install react-picture-grid

In your component first import

import { ReactPictureGrid } from 'react-picture-grid';

Set your data

const data = [
  {
    image:
      'https://images.unsplash.com/photo-1475778057357-d35f37fa89dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    title: 'Nature 01',
    description: 'This picture is taken from unsplash.com',
  },
  {
    image:
      'https://images.unsplash.com/photo-1502675135487-e971002a6adb?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80',
    title: 'Nature 02',
    description: 'This picture is taken from unsplash.com',
  },
  {
    image:
      'https://images.unsplash.com/photo-1501862700950-18382cd41497?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=894&q=80',
    title: 'Nature 03',
    description: 'This picture is taken from unsplash.com',
  },
  {
    image:
      'https://images.unsplash.com/photo-1532040675891-5991e7e3d0cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80',
    title: 'Nature 04',
    description: 'This picture is taken from unsplash.com',
  },
];

then call component

<ReactPictureGrid data={data} showTitle gap={10} />

API Documentation

| Prop | Type | Details | | -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | | data | array of data props | This is the basic data array for your picture gallery. Please see Data prop to know how to send data or see example above | | showTitle | boolean | If this is true it will show title and description from data prop. | | showPreview | boolean | Allows you to see preview | | gap | number | The gap between each picture grid. gap is in px | | className | string | You can Pass a class to change attribute in picture grid | | imageClass | string | Any custom class if you want to pass directly to image file | | backDropColor | string | Color in Hex or Rgba format | | showImageInfo | boolean | Allows you to see Image's title and description if provided true when showPreview prop is true | | showImageCount | boolean | Allows you to see Image count in showImageInfo when both showImageInfo & showPreview is true | | closeOnClick | boolean | Allows you to see close Image Preview when user clicked on background | | pattern | array | string array of (big - tall - small - wide) . big - 2x2, small- 1x1, wide - 1x2, tall - 2x1 |

Data Prop

| Prop | Type | Details | | ----------- | ------ | ------------------------- | | image | string | Image link you show | | title | string | Title of that image | | description | string | Description of that image |

Develop

Clone the repo from github

$ git clone https://github.com/sazzadsazib/react-picture-grid

Install Dependencies

$ yarn install

Then, Run storybook

$ yarn storybook

To run tests

$ yarn test

How to Contribute

Fork the repo. pull the master branch if required. Create a issue why we need this feature, then create your feature branch do your changes. write test code if required. and Send a Pull Request . PR's are always welcome!

Release log

25 March 2020 - v 1.0.4/1.0.41

• [x] Fixed Backdrop sizing
• [x] Added Backdrop Color Prop as backDropColor
• [x] Added Props showImageInfo , showImageCount & closeOnClick

24 March 2020 - v 1.0.3

• [x] Fixed Documentation Error

24 March 2020 - v 1.0.2

• [x] Added props showPreview for Image Preview

23 March 2020 - v 1.0.1

• [x] Updated Documentation
• [x] Updated storybook

23 March 2020 - v 1.0.0

• [x] Initial Release with Component.