React-Clipboard

React wrapper for clipboard.js

![Build
Status](https://travis-ci.org/nihey/react-clipboard.js)
![Dependency
Status](https://david-dm.org/nihey/react-clipboard.js)

Installation

``
$ npm i --save react-clipboard.js
`

Usage

You can use clipboard.js original data-* attributes:
`javascript
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';

class MyView extends Component {
render() {
return (

copy to clipboard

);
}
}

ReactDOM.render(, document.getElementById('app'));
`

- If you want to provide any constructor option as in new Clipboard('#id', options),
you may use option-* attributes

- callbacks will be connected via on* attributes (such as onSuccess)
`javascript
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';

class MyView extends Component {
constructor() {
super();

this.onSuccess = this.onSuccess.bind(this);
this.getText = this.getText.bind(this);
}

onSuccess() {
console.info('successfully copied');
}

getText() {
return 'I\'ll be copied';
}

render() {
// Providing option-text as this.getText works the same way as providing:
//
// var clipboard = new Clipboard('#anything', {
// text: this.getText,
// });
//
// onSuccess works as a 'success' callback:
//
// clipboard.on('success', this.onSuccess);
return (

copy to clipboard

);
}
}

ReactDOM.render(, document.getElementById('app'));
`

Custom HTML tags may be used as well (you can use custom components as well):
Beware: Stateless/Functional components are yet to be added
`javascript
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';

class MyView extends Component {
render() {
// Clipboard is now rendered as an ''
return (

copy to clipboard

);
}
}

ReactDOM.render(, document.getElementById('app'));
`

Default html properties may be passed with the button-* pattern:
`javascript
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';

class MyView extends Component {
render() {
return (

copy to clipboard

);
}
}

ReactDOM.render(, document.getElementById('react-body'));
``

License

This code is released under
CC0 (Public Domain)