relaze

A modern image lazy loading library for React.

  • relaze

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
relaze
2002.1.16 years ago7 years agoMinified + gzip package size for relaze in KB

Readme

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

Features

  1. Single higher-order component
  2. Performant scrolling using requestAnimationFrame
  3. Supports srcset
  4. 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' />
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})`
  }} />
))

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} />

License

MIT License © Eric Bailey