react-clip

0.1.4 • Public • Published

React-Clipboard

React wrapper for clipboard.js

BuildStatus DependencyStatus

Installation

$ npm i --save react-clipboard.js

Usage

You can use clipboard.js original data-* attributes:

var React = require('react');
var ClipboardButton = require('react-clipboard.js')

var MyView = React.createClass({
  render: function() {
    return <div>
      <ClipboardButton data-clipboard-text="I'll be copied">
        copy to clipboard
      </ClipboardButton>
    </div>;
  },
});

React.render(<MyView/>, document.getElementById('react-body'));
  • 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)

var React = require('react');
var ClipboardButton = require('react-clipboard.js')

var MyView = React.createClass({
  onSuccess: function() {
    console.info('successfully coppied');
  },

  getText: function() {
    return 'I'll be copied';
  },

  render: function() {
    // 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 <div>
      <ClipboardButton option-text={this.getText} onSuccess={this.onSuccess}>
        copy to clipboard
      </ClipboardButton>
    </div>;
  },
});

React.render(<MyView/>, document.getElementById('react-body'));

Default html properties may be passed with the button-* pattern:

var React = require('react');
var ClipboardButton = require('react-clipboard.js')

var MyView = React.createClass({
  render: function() {
    return <div>
      <ClipboardButton data-clipboard-text="I'll be copied" button-title="I'm a tooltip">
        copy to clipboard
      </ClipboardButton>
    </div>;
  },
});

React.render(<MyView/>, document.getElementById('react-body'));

License

This code is released under CC0 (Public Domain)

Package Sidebar

Install

npm i react-clip

Weekly Downloads

0

Version

0.1.4

License

CC0

Last publish

Collaborators

  • afc163