React元件化複製 react-clipboardjs-copy

freeshine發表於2018-06-26
React元件化JS

最近寫了一個基於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={(e) => console.log(e)}
                        onError={(e) => console.log(e)}>
                        <button>Copy</button>
                    </ReactClipboard>
                </section>
            </div>
        )
    }
}
複製程式碼
<ReactClipboard
    target={'.copy-target'}
    selection={true}
    onSuccess={(e) => console.log(e)}
    onError={(e) => console.log(e)}
>
    <button>Copy</button>
</ReactClipboard>
複製程式碼

配置

  • 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 git@github.com:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

npm install

npm run dev
複製程式碼

如果有問題請issues。

求?和 fork

相關文章