react-googlefeedback

v1.0.8

Published

2 years ago

Google-style feedback component

Downloads

0High
0Medium
0Low

maikuraki

google feedback react material screenshot hightlight

googleFeedback

demo演示

使用文档

1.安装：

使用npm

npm install react-googlefeedback --save-dev

2.使用

react中：

import React from 'react';
import ReactDOM from 'react-dom';
import Feedback from 'react-googlefeedback';
import 'react-googlefeedback/dist/style.css';

const license = `如出于法律原因需要请求更改内容，请前往
                <a href="" >法律帮助</a>
                页面。系统可能已将部分
                <a href="">帐号和系统信息</a>
                发送给Google。我们将根据自己的
                <a href="">隐私权政策</a>和<a href="">服务条款</a>
                使用您提供的信息帮助解决技术问题和改进我们的服务。`;

class Page extends React.Component {
    constructor() {
        super();
        this.state = {
            open: false,
        }
    }
    open() {
        this.setState({
            open: true,
        })
    }
    cancel() {
        this.setState({
            open: false,
        })
    }
    send(data) {
        console.log(data)
    }
    render() {
        return (
            <div>
                <button onClick={this.open.bind(this)}>feedback</button>
                {
                    this.state.open?
                        <Feedback
                            theme="#3986FF"
                            cancel={this.cancel.bind(this)}
                            send={this.send.bind(this)}
                            license={license}
                            proxy="http://127.0.0.1:5000"
                            title="发送反馈"
                            placeholder="请说明您的问题或分享您的想法"
                            requiredTip="必须添加说明"
                            editTip="点击编辑高亮或隐藏信息"
                            loadingTip="正在加载屏幕截图..."
                            checkboxLabel="包含截图"
                            cancelLabel="取消"
                            confirmLabel="发送"
                            hightlightTip= "突显问题"
                            hideTip= "隐藏敏感信息"
                            editDoneLabel= "完成"
                        />:null
                }
            </div>
        )
    }
}
ReactDOM.render(<Page/>, document.getElementById('main'));

在页面中引入js文件使用：

<body>
    <div id="feedback"></div>
    <button id="btn"></button>
<body>
<script src="react-googlefeedback/dist/googlefeedback.js"></script>
<script>
    new Feedback({
        container: document.getElementById('feedback'),
        trigger: document.getElementById('btn'),
        theme: '#3986FF',
        proxy: 'http://127.0.0.1:5000',
        title: '发送反馈',
        placeholder: '请说明您的问题或分享您的想法',
        requiredTip: '必须添加说明',
        editTip: '点击编辑高亮或隐藏信息',
        loadingTip: '正在加载屏幕截图...',
        checkboxLabel: '包含截图',
        cancelLabel: '取消',
        confirmLabel: '发送',
        hightlightTip: '突显问题',
        hideTip: '隐藏敏感信息',
        editDoneLabel: '完成',
        license: `如出于法律原因需要请求更改内容，请前往
                <a href="" >法律帮助</a>
                页面。系统可能已将部分
                <a href="">帐号和系统信息</a>
                发送给Google。我们将根据自己的
                <a href="">隐私权政策</a>和<a href="">服务条款</a>
                使用您提供的信息帮助解决技术问题和改进我们的服务。`,
        send: function (data) {
            console.log(data)
        }
    });
</script>

3.参数说明

4.跨域代理

需要启动一个服务用于代理。首先安装html2canvas-proxy

npm install html2canvas-proxy --save

在node中使用代理

var proxy = require('html2canvas-proxy');
var express = require('express');
var app = express();
app.use('/', proxy());

DOCUMENT

1.Install

Using npm:

npm install react-googlefeedback --save-dev

2.Usage

Using React:

import React from 'react';
import ReactDOM from 'react-dom';
import Feedback from 'react-googlefeedback';
import 'react-googlefeedback/dist/style.css';

const license = `Go to the
                <a href="" >Legal Help page </a>
                to request content changes for legal reasons. Some
                <a href="">account and system information </a>
                may be sent to Google. We will use the information you give us to help address technical                  issues and to improve our services, subject to our
                <a href=""> Privacy Policy</a>and<a href="">Terms of Service</a>.`;

class Page extends React.Component {
    constructor() {
        super();
        this.state = {
            open: false,
        }
    }
    open() {
        this.setState({
            open: true,
        })
    }
    cancel() {
        this.setState({
            open: false,
        })
    }
    send(data) {
        console.log(data)
    }
    render() {
        return (
            <div>
                <button onClick={this.open.bind(this)}>feedback</button>
                {
                    this.state.open?
                        <Feedback
                            theme="#3986FF"
                            cancel={this.cancel.bind(this)}
                            send={this.send.bind(this)}
                            license={license}
                            proxy="http://127.0.0.1:5000"
                            title="Send feedback"
                            placeholder="Describe your issue or share your ideas"
                            requiredTip="A description is required"
                            editTip="Click to highlight or hide info"
                            loadingTip="Screenshot loading..."
                            checkboxLabel="Include screenshot"
                            cancelLabel="CANCEL"
                            confirmLabel="SEND"
                            hightlightTip= "Hightlight issues"
                            hideTip= "Hide sensitive info"
                            editDoneLabel= "DONE"
                        />:null
                }
            </div>
        )
    }
}
ReactDOM.render(<Page/>, document.getElementById('main'));

Standalone:

<body>
    <div id="feedback"></div>
    <button id="btn"></button>
<body>
<script src="react-googlefeedback/dist/googlefeedback.js"></script>
<script>
    new Feedback({
        container: document.getElementById('feedback'),
        trigger: document.getElementById('btn'),
        theme: '#3986FF',
        proxy: 'http://127.0.0.1:5000',
        title: "Send feedback",
        placeholder: "Describe your issue or share your ideas",
        requiredTip: "A description is required",
        editTip: "Click to highlight or hide info",
        loadingTip: "Screenshot loading...",
        checkboxLabel: "Include screenshot",
        cancelLabel: "CANCEL",
        confirmLabel: "SEND",
        hightlightTip: 'Hightlight issues',
        hideTip: 'Hide sensitive info',
        editDoneLabel: 'DONE',
        license: `Go to the
                <a href="" >Legal Help page </a>
                to request content changes for legal reasons. Some
                <a href="">account and system information </a>
                may be sent to Google. We will use the information you give us to help address technical                  issues and to improve our services, subject to our
                <a href=""> Privacy Policy</a>and<a href="">Terms of Service</a>.`,
        send: function (data) {
            console.log(data)
        }
    });
</script>

3.Documentation

4.Cross domain agent

Need to start a service for proxy. first install html2canvas-proxy

npm install html2canvas-proxy --save

Use proxy in Nodejs

var proxy = require('html2canvas-proxy');
var express = require('express');
var app = express();
app.use('/', proxy());