react-clipboardjs-copy

react-clipboardjs-copy

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

pnpm install

## development
pnpm run dev

## test
pnpm run test

## production
pnpm run build

Reference material

clipboard.js

License

MIT © Shine Shao