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

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

24 March 2020 - v 1.0.3

• Fixed Documentation Error

24 March 2020 - v 1.0.2

• Added props showPreview for Image Preview

23 March 2020 - v 1.0.1

• Updated Documentation
• Updated storybook

23 March 2020 - v 1.0.0

• Initial Release with Component.