open-index/open-npm huggingface dataset:
npm package: @quansitech/react-qrscanner
Description: ## install npm i @quansitech/react-qrscanner
Author: tiderjian
Latest version: 1.2.0

## summary

## install
npm i @quansitech/react-qrscanner 

## usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import  { QrcodeScanner, Util } from "@quansitech/react-qrscanner";

let defaultOpt = {
    websocket: 'ws://192.168.31.222:2346', //必填 websocket地址
    url: 'http://www.test.com/home/index/scan',  //二维码的地址，会自动在后面附上token 必填
    queryStr: 'project_id=1', //根据业务需要可在这里附加必须的参数 选填
    size: 128, //二维码的大小 选填 默认128
    bgColor: '#FFFF44', //二维码背景颜色 选填
    fgColor: '#CC00FF', //二维码前景色 选填
    imageSettings: {  //设置二维码中间图片 选填
        src: "https://cdn.learnku.com/uploads/images/201901/24/1/OyBnfB2vlk.png!/both/44x44", //图片的url地址
        height: 30, //图片高度
        width:30, //图片宽度
        excavate: true //是否挖孔
    },
    scannedRenderText: "已扫描", //扫描后展示的文字 选填 默认“已绑定”
    scannedRender: true, //是否使用扫描后自带的提示 选填 默认true
    scannedCallback:function(){ //扫描后执行的回调 选填
        let span = document.createElement('span');
        span.innerText = '测试';
        document.getElementById('1234').appendChild(span);
    }
};
ReactDOM.render(<QrcodeScanner url={defaultOpt.url} websocket={defaultOpt.websocket} 
    queryStr={defaultOpt.queryStr} size={defaultOpt.size} scannedRenderText={defaultOpt.scannedRenderText}
    bgColor={defaultOpt.bgColor} fgColor={defaultOpt.fgColor} imageSettings={defaultOpt.imageSettings}
    scannedCallback={defaultOpt.scannedCallback} scannedRender={defaultOpt.scannedRender} />, 
    document.getElementById("1234"));




//扫码调用
const util = new Util();

let psn = "ws://192.168.31.222:2346";  //websocket地址
let token = "####-####-####"; //二维码生成的token
let callback = function(status, error){   //扫码回调 status = 1表示扫码成功  0表示二维码失效  error返回错误信息
    if(status == 1){
        alert('success');
    }
    else{
        alert(error);
    }
}
let param = { custom_id: '1234567' } //需要传递给后端业务代码处理的参数
util.scan(psn, token, callback, param);
```
npm package: @quansitech/react-wysiwyg
Description: 所见即所得的cms编辑组件
Author: tiderjian
Latest version: 1.4.1

## summary
所见即所得的cms编辑组件

## install
npm i @quansitech/react-wysiwyg 

## usage
给需要进行编辑的元素添加'render-mg'class

添加data-component="text"(text只是其中一种类型，可以改成需要的类型)，不同类型的component会有相应的data配置值，详细参看具体类型部分

添加data-key="cover"，设置可编辑元素对应的key，可通过 getResult方法获取当前key值

全局设置
```js
import WYSIWYG from '@quansitech/react-wysiwyg';
import 'antd/lib/upload/style/index.css';
import 'antd/lib/input/style/index.css';
import 'antd/lib/popover/style/index.css';
import 'antd/lib/message/style/index.css';
import '@quansitech/react-wysiwyg/lib/index.css';

const options = {
    className: '', //启动所见即所得功能的元素class，默认render-mg，可改成自己需要的值
    imageUploadUrl: '', //image类型可通过该值全局设置的上传url
    imageFontSize: '', //image类型可通过该值全局设置icon图片大小
    imageSize: '', //image类型可通过该值全局设置上传图片大小限制
}

const wg = new WYSIWYG(options);

wg.getResult(); //获取当前所有编辑元素的值
```

### type
1. image  

data-upload='url' 可对image类型元素单独设置图片上传url

data-fontsize='24px' 单独设置图片icon的大小

data-top="20%" 设置icon距离顶坐标的距离

data-left="30%" 设置icon距离左坐标的距离

data-tips="图片分辨率:800x600" 设置提示

data-size="5" 图片大小限制 5MB 默认 10MB

当存在全局设置时，单独设置有更高优先级

2. text

3. textarea

4. backgroundImage

该类型配置和image一样

5. refer

data-link 设置跳转的地址

data-top="20%" 设置icon距离顶坐标的距离

data-left="30%" 设置icon距离左坐标的距离

该类型可以不设置data-key

6. link

自定义跳转地址

data-value 跳转地址的值

data-top 设置icon位置

data-fontsize 设置icon大小

data-top="20%" 设置icon距离顶坐标的距离

data-left="30%" 设置icon距离左坐标的距离