stackedimage-react

React.js component to easily generate an optimized <picture/> element, using the StackedImage folder you created at StackedImage.com

Demo

Visit the demo page...

Install

npm install --save stackedimage-react

If you intend to use the lazy loading functionality of this component, you will need to inlcude a polyfill for the Intersection Observer API, which is not supported by all browsers.

npm install --save intersection-observer

And follow these instructions.

Usage

The component expects the default StackedImage.png/jpeg file as its source and assumes all other images are present in the same folder. When you add any other image as the source, the component will fallback to a regular <img /> element.

import React, { Component } from 'react'

import StackedImage from 'stackedimage-react'

class Example extends Component {
  render () {
    return (
      <StackedImage src="../folder/StackedImage.png"/>
    )
  }
}

Props

The StackedImage component accepts additional props for extra configuration, but keep in mind that it is a PureComponent, so it will only update when props with a primitive value are updated.

Prop	Proptype	Default	Required	Description
src	String	none	yes	Path to the default StackedImage file
alt	String	none	no	Alt-text for the image
media	object	{ mobile: 768, tablet: 992, laptop: 1200 }	no	Defines the max-width for viewport breakpoints
lazy	bool	false	no	Configure the StackedImage to be lazy-loaded
offset	number	300	no	Determines at what offset from the viewport (in pixels) the image should start to load (only when the prop lazy has been applied
style	object	none	no	Add your own styles
className	string	none	no	Add your own class

Full example

import React, { Component } from 'react'

import stackedImage from 'stackedimage-react'

class Example extends Component {
  render () {
    return (
      <stackedImage
        src="../folder/StackedImage.png"
        alt="Example image"
        media={{
          mobile: 320,
          tablet: 900,
          laptop: 1100,
        }}
        lazy={true}
        offset={500}
        style={{
          width: '100%',
          height: '300px',
        }}
        className="image"
      />
    )
  }
}

License

MIT © wietsedevries