open-index/open-npm huggingface dataset:
npm package: @gem-mine/rc-lazy-image
Description: rc-lazy-image
Latest version: 0.1.1

# 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)
npm package: @gem-mine/rc-qrcode
Description: rc-qrcode
Author: just4u-wei@sohu.com
Latest version: 0.1.1

# rc-qrcode
---

二维码组件，用于绘制二维码

## Usage

```js
import Qrcode from '@gem-mine/rc-qrcode';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Qrcode />, container);
```

### 基本使用

基本使用

```jsx
import Qrcode from "@gem-mine/rc-qrcode";

class Demo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let _p = {
      text: '2017.03.29',
    };
    return (
      <div>
        <Qrcode {..._p} />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);
```

### 二维码图案

二维码图案

```jsx
import Qrcode from "@gem-mine/rc-qrcode";

class Demo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let _p = {
      text: '2017.12.05',
      image: '//cs.101.com/v0.1/static/fish/image/11.png?serviceName=fish',
    };
    return (
      <div>
        <Qrcode {..._p} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```

## API

| 参数 | 说明 | 类型 | 默认值 |
|-|-|-|-|
| size         | 必选参数,二维码大小 | Number | 256 |
| text         | 必选参数,要编码的字符串 | String | '' |
| correctLevel | 纠错级别，可取0、1、2、3，数字越大说明所需纠错级别越大 | Number | 3 |
| background   | 背景色 | String | '#fff' |
| foreground   | 前景色 | String |'#000' |
| image        | 中间图片的url，只支持配置正方形图片 | String | '' |
| imageSize    | 中间图片的大小 | Number | 3 |


## License

rc-qrcode is released under the MIT license.