Skip to content

Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.

Notifications You must be signed in to change notification settings

nickmcmillan/react-pig

Repository files navigation

react-pig

Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.

View Demo

NPM npm bundle size JavaScript Style Guide

A re-implementation of @schlosser's pig.js in React.

Instead of hosting images locally I've used Cloudinary - an image hosting provider, which adds the benefit of on-the-fly image resizing. So we don't need to worry about managing/generating multiple versions of an image at different resolutions. Like the original version of Pig.js we still need to provide an array of objects containing metadata about each image. I've created a node script upload.js to do this for us, see below section on upload.js.

In addition each image is now clickable and will expand to the center of the screen. It uses React Spring to handle the transition.

React-pig-utils

React Pig requires that a specific JSON format be supplied. So this project comes with a companion repo which provides utilities for doing that. Check it out here react-pig-utils.

Example usage of react-pig

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

This React library was packaged with https://github.com/transitive-bullshit/create-react-library

License

MIT © nickmcmillan

About

Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •