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

pnpm install

## development
pnpm run dev

## test
pnpm run test

## production
pnpm run build

Reference material

clipboard.js