React组件化复制 react-clipboardjs-copy

最近写了一个基于clipboard.js的复制组件。 组件化复制文本和复制目标元素中的元素

下面开始介绍一下

#react-clipboardjs-copy

一个基于clipboard.js的React复制组件

安装

npm install --save react-clipboardjs-copy
复制代码

基本使用

import React from 'react';
import {ReactClipboard} from 'react-clipboardjs-copy'
import './App.css';
export default class App extends React.Component {
    render () {
        return (
            <div className="App">
                <section className="app-item">
                    <div className="app-item-desc">copy textdiv>
                    <ReactClipboard text='copy text'
                        onSuccess={(e) => console.log(e)}
                        onError={(e) => console.log(e)}>
                        <button>Copybutton>
                    ReactClipboard>
                section>
            div>
        )
    }
}
复制代码

 console.log(e)}
    onError={(e) => console.log(e)}
>
    Copy

复制代码

配置

• text - string React组件要复制的内容，其对应 clipboard.js 的 data-clipboard-text属性。

• target - string React组件要复制的目标元素. 其对应 clipboard.js 的 data-clipboard-target属性。

• action - string React组件的行为. 其对应 clipboard.js 的 data-clipboard-action属性。但是目前只支持复制(默认: 'copy')。

• selection - boolean 设置是否清除复制的选中. 其对应 clipboard.js 的事件 e.clearSelection(). (默认: true，不清除)

• onSuccess - function 复制成功回调.

• onError - function 复制出错回调.

开发

git clone [email protected]:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

npm install

npm run dev
复制代码

如果有问题请issues。

求?和 fork

转载于:https://juejin.im/post/5b31e3e5f265da59bd5eccb2