Package Exports

react-clipboardjs-copy
react-clipboardjs-copy/cjs/index.js
react-clipboardjs-copy/es/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-clipboardjs-copy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-clipboardjs-copy

Download Version License

A react copy component that based on clipboard.js

中文

Installing

npm install --save react-clipboardjs-copy

Basic usage

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>

Options(props)

Property	Description	Type	Default
action	Overwrites default command ('cut' or 'copy') , Corresponding to clipboard.js attribute data-clipboard-action.	`cut` \| 'copy'	`copy`
target	React component will copy target element content. Corresponding to `clipboard.js` attribute `data-clipboard-target`.	string \| function(elem: Element): Element	-
text	React component will copy content. Corresponding to `clipboard.js` attribute `data-clipboard-text`	string \| function(elem: Element): string
container	For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value.	Element	`body`
selection	Setting whether to clear the copy or cut selected	boolean	false
onSuccess	Operation success callback	function(event?: ClipboardJS.Event): void	-
onError	Operation error callback	function(event?: ClipboardJS.Event): void	-

Developing

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

cd react-clipboardjs-copy

npm install

npm run dev

Reference material

clipboard.js