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
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.
node_modules, as npm loads all binaries in node_modules/.bin/ into $PATH. See the npm docs: docs.npmjs.com/misc/scripts#path. That way the production script can become browserify -r react-clipboard -r react | uglifyjs -m > bundle.min.jsYou 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} />
);
}
});