React-Clipboard
React wrapper for clipboard.js
Installation
$ npm i --save react-clipboard.js
Usage
You can use clipboard.js
original data-*
attributes:
;;; { return <Clipboard data-clipboard-text="I'll be copied"> copy to clipboard </Clipboard> ; } ReactDOM;
-
If you want to provide any constructor option as in
new Clipboard('#id', options)
, you may useoption-*
attributes -
callbacks will be connected via
on*
attributes (such as onSuccess)
;;; { super; thisonSuccess = thisonSuccess; thisgetText = thisgetText; } { console; } { return 'I\'ll be copied'; } { // 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 <Clipboard option-text=thisgetText onSuccess=thisonSuccess> copy to clipboard </Clipboard> ; } ReactDOM;
Custom HTML tags may be used as well (you can use custom components as well): Beware: Stateless/Functional components are yet to be added
;;; { // Clipboard is now rendered as an '<a>' return <Clipboard component="a" button-href="#" data-clipboard-text="I'll be copied"> copy to clipboard </Clipboard> ; } ReactDOM;
Default html properties may be passed with the button-*
pattern:
;;; { return <Clipboard data-clipboard-text="I'll be copied" button-title="I'm a tooltip"> copy to clipboard </Clipboard> ; } ReactDOM;
License
This code is released under CC0 (Public Domain)