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 text</div>
                  <ReactClipboard
                    text='copy text'
                    onSuccess={() => {}}
                    onError={() => {}}
                  >
                    <button
                      onClick={() => {
                        console.log('click button');
                      }}
                    >
                      Copy Text
                    </button>
                  </ReactClipboard>
                </section>
                <section className='app-item'>
                  <div className='app-item-desc'>
                    <textarea id="textarea">Mussum ipsum cacilds...</textarea>
                  <div />
                  </div>
                  <ReactClipboard
                    action="cut"
                    target="#textarea"
                    onSuccess={() => {}}
                    onError={() => {}}
                  >
                    <button>Cut</button>
                  </ReactClipboard>
                </section>
            </div>
        )
    }
}

<input id="input" value="git@github.com:freeshineit/react-clipboardjs-copy.git" />
<ReactClipboard
  target="#input"
  onSuccess={handleSuccess}
  onError={handleError}
>
  <button>
    Copy Input value
  </button>
</ReactClipboard>

配置

属性	描述	类型	默认值
action	命令（'cut' 或 'copy'），对应于 clipboard.js 属性 data-clipboard-action。	cut | copy	copy
target	React 组件将复制目标元素内容。 对应于clipboard.js属性data-clipboard-target。	string | function(elem: Element): Element	-
text	React 组件将复制内容。 对应clipboard.js属性data-clipboard-text	string | function(elem: Element): string
container	为了在任何其他改变焦点的库中使用，您需要将焦点元素设置为容器值。	Element	body
selection	设置是否清除所选的副本或剪切	boolean	false
onSuccess	操作成功回调	function(event?: ClipboardJS.Event): void	-
onError	操作错误回调	function(event?: ClipboardJS.Event): void	-

开发

git clone git@github.com:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

npm install

npm run dev

如果有问题请issues。

求🌟和 fork