# react-zeroclipboard

> react component for zeroclipboard

Latest version **4.0.1** (published 2018-02-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-zeroclipboard
pnpm add react-zeroclipboard
yarn add react-zeroclipboard
bun add react-zeroclipboard
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2018-02-18 |
| First published | 2014-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 95 |
| Author | Frankie Bagnardi |
| Maintainers | greenjello |
| Keywords | react, clipboard, react-component |

## Links

- npm: https://www.npmjs.com/package/react-zeroclipboard
- Repository: https://github.com/brigand/react-zeroclipboard
- Homepage: http://brigand.github.io/react-zeroclipboard/
- Issues: https://github.com/brigand/react-zeroclipboard/issues
- npm.io page: https://npm.io/package/react-zeroclipboard

## Dependencies (2)

- [envify](https://npm.io/package/envify.md) ^3
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.5.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.1 (latest) — 2018-02-18
- 3.0.0-beta.2 (beta) — 2015-08-10
- 2.0.1-pre (pre) — 2015-06-17
- 4.0.0 — 2017-11-02
- 3.3.0 — 2017-05-19
- 3.2.3 — 2017-04-22
- 3.2.2 — 2016-09-18
- 3.2.1 — 2016-09-08
- 3.2.0 — 2016-06-18
- 3.1.0 — 2016-04-25
- 3.0.0 — 2015-10-31
- 2.0.3 — 2015-10-31
- 2.0.2 — 2015-10-30
- 3.0.0-beta — 2015-08-10
- 2.0.1 — 2015-06-17
- … 16 more at https://npm.io/package/react-zeroclipboard/versions

## README

## react-zeroclipboard

This is a wrapper around ZeroClipboard for use with React.  ZeroClipboard has a difficult to work with api
which is being abstracted from you.  This library...

*   asynchronusly loads zeroclipboard from cdnjs
*   handles mounting/unmounting of components
*   figures out which element was clicked
*   allows you to declare text/html/rtf, or pass a function which returns it dynamically

## Warning!

zero-clipboard uses flash which is being phased out across many browsers, and is sometimes buggy in the browsers that do support it. There have been reports of the plugin randomly not working, despite no significant changes to the plugin, and keeping the same zero-clipboard version.

If you're interested in solving this, your help is very much appreciated, and this section will be replaced with a big "thank you" for your work. Until then, using this plugin isn't recommended.

### Install

This is only available through npm, it should work with browserify or webpack.  It's compatible with react 0.13 and up.

```sh
npm install --save react-zeroclipboard
```

Or for react 0.11 and 0.12

```sh
npm install --save react-zeroclipboard@0.4
```

Also install react if you haven't already (of course).

### Usage

Here's a simple example:

```js
render: function(){
   return (
      <div>
         <p>Click the button to copy some text</p>
            <ReactZeroClipboard text="Hello, world!">
               <button>Copy</button>
            </ReactZeroClipboard>
      </div>
   )
}
```

The full api offers more flexibility.  If you provide e.g. html and text, they'll both be set and
the application you're pasting into decides which one to use.  Methods have higher priority than
the literal strings, if for some reason you pass both.

```js
<ReactZeroClipboard 
   text="text to copy"
   html="<b>html to copy</b>"
   richText="{\\rtf1\\ansi\n{\\b rich text to copy}}"
   getText={(Void -> String)}
   getHtml={(Void -> String)}
   getRichText={(Void -> String)}

   onCopy={(Event -> Void)}
   onAfterCopy={(Event -> Void)}
   onErrorCopy={(Error -> Void)}

   onReady={(Event -> Void)}

   // optional
   swfPath="http://user_defined_cdn_path/ZeroClipboard.swf"
/>
```

Here's an example where we copy the current url to the clipboard, both in plain text and a html anchor

If the user pastes this in their address bar they get the url, and if they paste it in gmail they get a nice link.

```js
render: function(){
   return (
      <div>
         <p>Copy a link to this page</p>
            <ReactZeroClipboard 
               getText={function(){ return location.href; }}
               getHtml={function(){ return '<a href="' + location.href + '">My Page</a>'; }}>
                  <button>Copy</button>
            </ReactZeroClipboard>
      </div>
   )
}
```

## I'm getting weird ZeroClipboard errors

Usually this is caused by flash weirdness and/or cdnjs where we pull ZeroClipboard from. You can work around this
by hosting ZeroClipboard and the swf yourself. Make sure the page and the two assets are either both http, or both
https. There's a copy of the swf in the assets directory of this repo.

To access it with webpack, configure a loader for swf files:

```js
{
  test: /\.swf$/g,
  loader: 'file-loader'
}
```

And then import the swf from this package.

```jsx
<ReactZeroClipboard swfPath={ require('react-zeroclipboard/assets/ZeroClipboard.swf') }>
```

---
_Source: https://npm.io/package/react-zeroclipboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._