# r-img-lazyload

> React module for lazy-loading images in your react.js applications.

Latest version **1.1.0** (published 2018-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install r-img-lazyload
pnpm add r-img-lazyload
yarn add r-img-lazyload
bun add r-img-lazyload
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-10-19 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 174.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | ssslb |
| Maintainers | ssslb |
| Keywords | r-img-lazyload, react, react-lazyload, react-img-lazyload, lazy, lazy-load, lazyload, lazy loading, load |

## Links

- npm: https://www.npmjs.com/package/r-img-lazyload
- Repository: https://github.com/DrawAChicken/r-img-lazyload
- Homepage: https://github.com/DrawAChicken/r-img-lazyload#readme
- Issues: https://github.com/DrawAChicken/r-img-lazyload/issues
- npm.io page: https://npm.io/package/r-img-lazyload

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-10-19
- 1.0.4 — 2018-10-19
- 1.0.3 — 2018-10-19
- 1.0.2 — 2018-10-13
- 1.0.1 — 2018-10-13
- 1.0.0 — 2018-09-14

## README

# react-img-lazyload

[![npm version](https://img.shields.io/npm/v/vue-lazyload.svg?style=flat-square)](https://www.npmjs.com/package/r-img-lazyload)
[![npm downloads](https://img.shields.io/npm/dm/vue-lazyload.svg?style=flat-square)](https://www.npmjs.com/package/r-img-lazyload)
[![npm license](https://img.shields.io/npm/l/vue-lazyload.svg?style=flat-square)](https://www.npmjs.com/package/r-img-lazyload)


React module for lazy-loading images in your react.js applications. Some of goals of this project worth noting include:

* [中文文档](https://github.com/DrawAChicken/r-img-lazyload/blob/master/README_CN.md)
* Based on [vue-lazyLoad](https://github.com/hilongjw/vue-lazyload) rewriting
* Be lightweight, powerful and easy to use
* Work on any image type
* Add loading class while image is loading
* Applicable to any style of layout
* Supports both of React

# Installation

## npm

```bash

$ npm install r-img-lazyload

```
# Usage
use `component` work

```js
import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: 'errorPic',
                loading: 'loadingPic'
            },
            src: ''
        };
        return <Lazyload {...config} />;
    }
}
```
use `raw HTML` work

```js
    <Lazyload src="http://xxxx.com/pic.png" tag="div" />
```
recommend `Package component` to use

```js
// Lazy.jsx
import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

const pic = require('xxxx/assets/img/defalut_pic.png');

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: pic,
                loading: pic
            },
            ...this.props
        };
        return <Lazyload {...config} />;
    }
}
// HomePage.jsx
import React, { Component } from 'react';
import Lazy form 'xxx/Lazy.jsx';

function HomePage() {
    return <lazy className="pic" src="xxxx.png" onClick="// todo..."/>
}

```
## Constructor Options
| key | description | default | options |
| :-: | :-: | :-: | :-: |
| src | Picture address | ‘’ | String |
| tag |  Background image using the label | ‘’ | String |
| options |  Other configuration | {} | [Other configuration](#othercon-figuration) |

### Other configuration
| key | description | default | options |
| :-: | :-: | :-: | :-: |
| error | src of the image upon load fail | ‘’ | String |
| loading | src of the image while loading | ‘’ | String |
| listenEvents |  events that you want React listen for | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'`] | Object |
| throttleWait |  throttle wait | 200 |Number|

### Desired Listen Events

You can configure which events you want v-img-lazyload by passing in an array
of listener names.

```js
import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: 'errorPic',
                loading: 'loadingPic',
                // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
                listenEvents: [ 'scroll' ]
            },
            src: ''
        };
        return <Lazyload {...config} />;
    }
}
```

### CSS state
here are three states while img loading `loading`、`loaded` 、`error`

```html
<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">
```
```css
<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>
```
# Todo
* [ ] observer
* [ ] life cycle

# License

[The MIT License](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/r-img-lazyload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._