stackedimage-react v1.1.0

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.

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