React-picture-grid NPM

GitHub top language GitHub language count npm bundle size GitHub code size in bytes npm NPM npm GitHub Release Date GitHub last commit

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!