Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.
npm install librephotos-react-pig> Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.
!npm bundle size
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 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.
``
yarn add react-pigor
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 (
numberOfItems={500} // Number. Optional, set the number of Items if you only partially loaded the data
updateItems=(visibleItem) => {} // Function. Optional. Returns the visible Items / items in buffer for dynamically fetching items.
scaleOfImage={3} // Number. Show more or less images. This value would show 3x more images
groupByDate // Boolean. Optional. Groups images by 'date' value. And uses the first 'location' in the group for the heading text.
updateGroups=(visibleGroups) => {} // Function. Optional. Returns the visible groups / groups in buffer to dynamically fetch data for them
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;
}}
handleClick={(event, item) => {}} // Allows for a custom click handler
selectable={true} // If true, it will add a selection to the top left corner
handleSelection={(item) =>{}} // Allows for a custom selection handler
selectedItems={selectedItems} // Array. Makes it possible to change the state of the selected tiles
toprightoverlay={component} // Add a component to the top right corner as an overlay
bottomleftoverlay={component} // Add a component to the bottom left corner as an overlay
/>
)
}
}
export default App
`
You have to install yarn:
`
npm install --global yarn
Use the yarn commands to install and continuously build react-pig:
`
yarn install
yarn run build
yarn start
To test your changes to the component, build and serve the example:
`
cd /example
yarn install
yarn start
You should now be able to see the website, with the changed component, at localhost:3000
This React library was packaged with https://github.com/transitive-bullshit/create-react-library
MIT © nickmcmillan