# WodaX 扫二维码登录组件

[![NPM version](https://img.shields.io/npm/v/wodax-login-qrcode.react.svg?style=flat)](https://npmjs.org/package/wodax-login-qrcode.react)
[![NPM downloads](http://img.shields.io/npm/dm/wodax-login-qrcode.react.svg?style=flat)](https://npmjs.org/package/wodax-login-qrcode.react)


![](https://raw.githubusercontent.com/wodax/wodax-login-qrcode.react/master/screens/mobile_code_login.jpg)

![](https://raw.githubusercontent.com/wodax/wodax-login-qrcode.react/master/screens/qrcode_login.jpg)

![](https://raw.githubusercontent.com/wodax/wodax-login-qrcode.react/master/screens/qrcode_out_work.jpg)

![](https://raw.githubusercontent.com/wodax/wodax-login-qrcode.react/master/screens/qrcode_scan_complete.jpg)

![](https://raw.githubusercontent.com/wodax/wodax-login-qrcode.react/master/screens/qrcode_demo_video.gif)

## 安装

```bash
$ npm i wodax-login-qrcode.react
# 或 
$ yarn add wodax-login-qrcode.react
```

## 功能特性

* 支持HTML5 EventSource 获取实时反馈；
* 支持自定义二维码显示样式；
* 支持外接API方式获取二维码；
* 支持自定义渲染接口；
* 支持调试日志输出；
* 高性能低占用率
* 高级可定制


## 使用说明

### Demo

```jsx harmony
import WodaXLoginWithQrCode from 'wodax-login-qrcode.react';
 
 
const Example = () => (
  <WodaXLoginWithQrCode />
);
 
```

### 当前可用的Props

```js
WodaXLoginWithQrCode.defaultProps = {
  className: `wodax-login-with-qrcode`,
  Style: {},

  // 是否开启日志调试
  debugEnable: false,

  // 可选项
  options: {
    // 基础参数: {eventSource使用}

    // 是否使用EventSource来重新获取最新QrCode
    useEventSourceForFetchQrCode: false,
    clientEventSource: {
      // EventSource 主要服务url
      url: `https://stream.wikimedia.org/v2/stream/recentchange`,
      // EventSource 附带参数
      params: {},
      // EventSource 可以处理的消息类型
      messageTypes: [`message`],
      // withCredentials
      withCredentials: false,
      // EventSource 是否保存所有
      saveAllEvents: false,
    },

    // 基础参数: {Title使用}
    title: `打开App，扫码登录`,
    titleClassName: `qr-login-title`,
    appLogo: ``,

    // QrCode 二维码配置
    qrCodeConfig: {
      renderAs: `canvas`,
      size: 128,
      bgColor: `#FFFFFF`,
      fgColor: `#000000`,
      level: `L`,
      includeMargin: false,
    },
    qrCodeContainerOpacity: {
      min: 0.01,
      max: 1,
    },

    // 提示信息
    toolTipContainerClassName: `qr-login-tooltip`,
    toolTipContainerStyle: {
      padding: '4px',
      position: 'absolute',
    },
    codeOutWorkText: `二维码已失效`,
    loginFailedText: `登录失败`,
    loginSuccessText: `登录成功`,
    qrCodeGetFailedText: `获取二维码失败`,
    scanCompleteText: `扫描成功! 请在手机上确认登录`,

    // 基础参数: {刷新区域，重新获取二维码}
    // 是否一直显示刷新区域
    refreshContainerShowEveryTime: false,
    refreshContainerProps: {
      style: {
        padding: '4px',
        position: 'absolute',
        marginTop: '40px',
      },
    },
    // 点击刷新
    refreshButtonCaption: `请点击刷新`,
    refreshButtonElement: `button`,
    refreshButtonProps: {
      style: {
        padding: '4px',
      },
    },

    // 基础参数: {实时信息接收处理}

    // 是否默认显示sse回显信息
    showSSEMessage: false,
  },

  // 数据请求接口，可以覆盖
  fetchQrCodeHandler: _default.fetchQrCodeHandler,

  // 数据反馈接口。外接应用，可以自己处理所有来自服务器的消息
  onReceiveMessageHandler: _default.onReceiveMessageHandler,

  // 渲染接口, 可以覆盖，重新写
  titleRender: _default.titleRender,
  qrCodeRender: _default.qrCodeRender,
  toolTipRender: _default.toolTipRender,
  additionLayerRender: _default.additionLayerRender,
  refreshQrCodeRender: _default.refreshQrCodeRender,
  sseMessageRender: _default.sseMessageRender,
};
```

## 在线文档运行

```bash
$ npm run website:run
# 或
$ yarn website:run
```

## 开发维护

### 构建

```bash
# 建议在兼容Linux的终端中运行，如Windows的WSL、或者Git Bash
$ yarn build
```



## 授权信息

[MIT](./LICENSE)