yarn add react-pig
# or
npm i react-pig

import Pig from 'react-pig'
import imageData from './imageData.json' // the file generated by using react-pig-utils

class App extends Component {
  render() {
    return (
      <Pig
        imageData={imageData} // Array. Required.
        groupByDate // Boolean. Optional. Groups images by 'date' value. And uses the first 'location' in the group for the heading text.
        gridGap={10} // Integer. Optional. Defaults to 8
        expandedSize={1600} // Integer. Optional. Expanded image will be loaded in that size. Defaults to 1000
        thumbnailSize={25} // Integer. Optional. Thumbnail image will be loaded in that size. Defaults to 10
        sortFunc={(a, b) => a.imageOrder > b.imageOrder} // Function. Optional. Used for sorting images f.ex. if you add custom fields to the json file
        bgColor="#fff" // String. Optional. Used for outlines when image is expanded, and for group headings
        getUrl={(url, pxHeight) => {
          // Pig calls this function every time it needs to fetch an image.
          // The url arg will be provided as is from imageData
          // Assuming the imageData was generated using upload.js, the url string will contain {{HEIGHT}}
          // The purpose of this function is to replace {{HEIGHT}} value with a dynamic value (which is passed in with pxHeight)
          // Eg this:
          // http://res.cloudinary.com/cloudinaryusername/image/upload/h_{{HEIGHT}}/v12345678/cloudinaryfolder/image.jpg
          // Becomes this:
          // http://res.cloudinary.com/cloudinaryusername/image/upload/h_800/v12345678/cloudinaryfolder/image.jpg
          // This gives you flexibility to define what the url looks like in case you're using something other than Cloudinary.
          // getUrl is optional.
          // If you omit this prop completely, Pig will do exactly this;
        }}
      />
    )
  }
}

export default App

npm install --global yarn

yarn install
yarn run build
yarn start

cd /example
yarn install
yarn start