Clipboard.js wrapper for ReactJS
npm install react-clipboard.jsReact wrapper for clipboard.js


$ 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'));
``This code is released under
CC0 (Public Domain)