# @gem-mine/rc-lazy-image

> rc-lazy-image

Latest version **0.1.1** (published 2019-09-26) · 0 weekly downloads

## Install

```sh
npm install @gem-mine/rc-lazy-image
pnpm add @gem-mine/rc-lazy-image
yarn add @gem-mine/rc-lazy-image
bun add @gem-mine/rc-lazy-image
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-09-26 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | amazebird, caolvchong, guoyh, mraiguo, wengzp |
| Keywords | react, react-lazyimg, react-component, ui component, ui, component |

## Links

- npm: https://www.npmjs.com/package/@gem-mine/rc-lazy-image
- npm.io page: https://npm.io/package/@gem-mine/rc-lazy-image

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2019-09-26
- 0.1.0 — 2019-09-23

## README

# rc-lazy-image
---

图片懒加载组件，提供异步加载等相关功能。

## Usage

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Image from '@gem-mine/rc-lazy-image';
ReactDOM.render(<Image src='xxx.jpg' />, container);
```


### 基本用法

```jsx
import Image from '@gem-mine/rc-lazy-image'

const props = {
  width: 200,
  height: 200,
}

class App extends React.Component {
  
  render() {
    return (
      <div>
        <Image {...props}
          src='//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg' />
        <Image {...props}
          src='//gcdncs.101.com/err.jpg' />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```

### 事件

```jsx
import Image from '@gem-mine/rc-lazy-image'

const props = {
  threshold: 500,
  appear: () => {
    console.log('threshold trigger')    
  }
};

ReactDOM.render(
  <div>
    <Image
      {...props}
      src={'//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg'}
    />
  </div>,
  mountNode,
);

```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| threshold | 指定距离底部多少距离时触发加载 | Number | 0 |
| event | 指定触发事件，默认为'scroll' | String | `scroll` |
| container | 指定容器，默认为window | React.Node | `window` |
| parent | 可以指定动画效果作用于元素的哪个父级元素 | String \| Number | - |
| appear | 元素出现在可视窗口时触发appear钩子函数 | Function | null |
| load | 元素图片的加载完后触发load钩子函数 | Function | null |
| error | 图片加载出错时触发error钩子函数 | Function | null |
| node_type | 指定生成的节点类型，默认为'img' | String | `img` |
| placeholder | 占位元素，除了支持普通的图片外，还支持react组件 | String \| React.Node | 默认占位图 |

fork from [react-lazyimg-component](https://github.com/zhansingsong/react-lazyimg-component)

---
_Source: https://npm.io/package/@gem-mine/rc-lazy-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._