react-justified-grid
Grid layout which keeps proportion of all images.
This library helps you to make layout like Google Photos easily.
Storybook - https://josephj.github.io/react-justified-grid/
Install
npm
npm install --save react-justified-grid
yarn
yarn add react-justified-grid
Usage
Firstly, you need to provide an image list with dimension provided.
const imageList = src: 'https://scontent.cdninstagram.com/vp/3fc240dca41408d36cc23f504fe1174e/5C66EC32/t51.2885-15/e35/s320x320/43817886_246662336018913_6991265436514516630_n.jpg' width: 320 height: 320 src: 'https://scontent.cdninstagram.com/vp/f1d729fe57fa4ddc7c18fa346609cdb8/5C838862/t51.2885-15/e35/s320x320/44348158_2491449144206376_3633417851169311676_n.jpg' width: 320 height: 167 src: 'https://scontent.cdninstagram.com/vp/b0f56148b7f7d06ff186a51853888b2f/5C84ACC0/t51.2885-15/e35/s320x320/44724241_2191160064490130_1438494317224719529_n.jpg' width: 320 height: 240 src: 'https://scontent.cdninstagram.com/vp/dcda7878c4a828f0c850b73dc5c6587d/5C728976/t51.2885-15/e35/p320x320/43158355_534503580355624_1875160473904621159_n.jpg' width: 320 height: 400;
Basic
import React Component from 'react'import JustifiedGrid from 'react-justified-grid' return <JustifiedGrid = = = =/> ;
Advanced
You can use ✨ render props ✨ (a.k.a children as function) to customize according to your needs.
import React Component Fragement from 'react';import Link from 'react-router-dom';import JustifiedGrid from 'react-justified-grid'; { return <JustifiedGrid = = => { return <Fragement> processedImages </Fragement> ; } </JustifiedGrid> }
License
MIT © josephj