james-oldfield / react-rpg

:camera: Responsive photo grid component for react js
43 stars 8 forks source link

react-rpg :camera:

what

react-rpg is a lightweight, stateless responsive photo grid component for reactjs. Quickly create instagram-esque responsive photo grids with no CSS dependencies.

DEMO

react-rpg

The component renders an array of images in square aspect-ratio for the modern, fluid web. The react-rpg component takes 100% width of the parent container using dynamic inline styles.

Column count can be specified at 3 different breakpoints.

how

To use in a react project, first, install via npm:

npm i react-rpg --save

Then require wherever you desire and pass it an array of image objects as props. See ./demo for a more thorough example.

...
import { ReactRpg } from 'react-rpg';

const images = [
  {
    url: "absolute url to the src of the image",
    clickHandler: (url, obj) => { console.log(url) }
  },
  {
    url: "http://images.com/myimage.jpg",
    clickHandler: (url, obj) => { console.log(obj) }
  }
];

class App extends React.Component {
  render() {
    return (
      <div className="myApp">
        <ReactRpg imagesArray={images} columns={[ 1, 2, 5 ]} padding={10} />
      </div>
    );
  }
}

Props

Scaffolded with Formidable Labs' component boilerplate, thanks!

changelog

v1.0

v2.0