react-img-lazy-load

Image lazy load component for react

Install

1yarn add @axetroy/react-img-lazy-load

Usage

1import React, { Component } from 'react';
2import { render } from 'react-dom';
3import LazyImage from '@axetroy/react-img-lazy-load';
4
5class App extends Component {
6  state = {};
7  componentDidMount() {
8    this.setState({
9      src: 'https://avatars1.githubusercontent.com/u/9758711?v=3'
10    });
11    setTimeout(() => {
12      this.setState({
13        src: 'https://webpack.js.org/cd0bb358c45b584743d8ce4991777c42.svg'
14      });
15    }, 5000);
16  }
17  render() {
18    const { src } = this.state;
19    return (
20      <div>
21        <LazyImage
22          src={src}
23          width="200"
24          height="300"
25          onEnter={component => {
26            console.log('enter viewport', component);
27          }}
28          onLeave={component => {
29            console.info('leave viewport', component);
30          }}
31        />
32        <div style={{ height: '2000px', backgroundColor: '#e3e3e3' }}>
33          hello world
34        </div>
35        <LazyImage src={src} />
36      </div>
37    );
38  }
39}
40
41const element = document.createElement('div');
42document.body.appendChild(element);
43render(<App />, element);

Props

• src: string

• onEnter: function

• onLeave: function

• and other props of img tag

Run the Demo

1git clone https://github.com/axetroy/react-img-lazy-load.git
2yarn
3yarn start

License

The MIT License