relaze

Tiny image lazy loading library for React. 800 bytes gzipped.

Features

Single higher-order component
Performant scrolling using requestAnimationFrame
Supports srcset
Universal

Install

npm i relaze --save

Usage

Create a reusable image component:

// Image.js
import relaze from 'relaze'
export default relaze(({ src, srcSet }) => (
  <img src={src} srcSet={srcSet} />
))

Pass it a src and a srcSet prop (optional):

import Image from './Image.js'
<Image src='image.jpg' srcSet='image.jpg 600w, image-large.jpg 1200w' ></Image>

When the image enters the viewport, Relaze will pass the src and srcSet
props to its child component.

Fade-in Image

// Image.js
import relaze from 'relaze'
import cx from 'classnames'
class Image extends React.Component {
  constructor(props) {
    super(props)
    this.state = { loaded: false }
  }
  render() {
    const { loaded } = this.state
    const { src, srcSet } = this.props
    return (
      <img
        src={src}
        srcSet={srcSet}
        className={cx({
          'is-loaded': loaded
        })}
        onLoad={e => {
          this.setState({
            loaded: true
          })
        }} />
    )
  }
}
export default relaze(Image)

Background Image

import relaze from 'relaze'
export default relaze(({ src }) => (
  <div style={{
    backgroundImage: `url(${src})`
  }} ></div>
))

Adjusting Threshold

A fraction of the viewport height. Positive values makes image load sooner, negative values makes image load later.

import Image from './Image.js'
<Image src='image.jpg' threshold={0.2} ></Image>