geelen / react-photo-collage

React Photo Collage

Installation

npm install react-photo-collage

Props

Name	Type	Required	Default	Description
width	string	false	800px
height	an array of strings	false	[]
layout	an array of strings	true	[]
photos	an array of strings	true	[]
showNumOfRemainingPhotos	boolean	true	false

Usage

import { ReactPhotoCollage } from "react-photo-collage";

const setting = {
  width: '600px',
  height: ['250px', '170px'],
  layout: [1, 4],
  photos: [
    { source: 'url/image-1.jpg' },
    { source: 'url/image-2.jpg' },
    { source: 'url/image-3.jpg' },
    { source: 'url/image-4.jpg' },
    { source: 'url/image-5.jpg' },
    { source: 'url/image-6.jpg' },
  ],
  showNumOfRemainingPhotos: true
};

function App() {
  return (
    <ReactPhotoCollage {...setting} />
  );
}

Demo

React-Photo-Collage-CodeSandbox

Photos courtesy of Unsplash.

Development

npm install
npm run demo