CODEWITHSUNDEEP
reactjs
jellyfication
jellyfication

Reputation: 180

Use a clipboard in react without using node

I've been finding a solution or a plugin for clipboard. I have found the react-zeroclipboard and react-clipboard for my copy and pasting usage. Apparently, these needs nodejs for me to run it? Are there any other plugin that won't let me use node?

Thanks

Upvotes: 0

Views: 1814

Answers (2)

Brigand
Brigand

Reputation: 86240

Actually, neither of them work in node.js. They're packaged as commonjs modules and distributed with npm, like nearly all react components. Node.js is required to build a bundle or components using browserify or webpack.

# install dependencies
npm init
npm install --save react-clipboard browserify react uglify-js

# development with source maps
./node_modules/.bin/browserify -d -r react-clipboard -r react -o bundle.js

# for production
NODE_ENV=production \
  ./node_modules/.bin/browserify -r react-clipboard -r react \
| ./node_modules/.bin/uglifyjs -m > bundle.min.js

And if you include it on the page you can do:

var React = require('react');
var ReactClip = require('react-clipboard');

You can then add more dependencies as your app grows and you need more features, and maintain their versions using package.json.

Note: some packages also provide a standalone global build and/or publish to bower, etc. but you'll limit your options a lot if you avoid npm and browserify/webpack.

Upvotes: 2

daniula
daniula

Reputation: 7028

You can use onCut onCopy onPaste events:

React.createClass({
    handlePaste: function(event) {
        _.each(event.clipboardData.items, function(item) {
            item.getAsString(function(string) {
                console.log('Pasted: ', string)
            })
        });
    },
    render: function () {
        return (
            <input type="text" onPaste={this.handlePaste} />
        );
    }
});

Upvotes: 2

Related Questions