nihey / React Clipboard.js
React wrapper for clipboard.js (flashless clipboard)
Stars: ✭ 266
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Clipboard.js
ClipboardXX
Header only, lightweight and cross platform C++ library for copy and paste text from clipboard.
Stars: ✭ 36 (-86.47%)
Mutual labels: clipboard
midgard
⛰️ Universal clipboard sharing service (supports macOS/Linux/Windows/iOS)
Stars: ✭ 81 (-69.55%)
Mutual labels: clipboard
CLIp
CLIp is a clipboard manager for a command line interface written in 100% standard C only. Pipe to it to copy, pipe from it to paste.
Stars: ✭ 12 (-95.49%)
Mutual labels: clipboard
My-Business
Business management tool featuring accounts, invoices, partners, projects, and server 🦄
Stars: ✭ 37 (-86.09%)
Mutual labels: clipboard
react-native-media-clipboard
Image support for the clipboard in React Native
Stars: ✭ 46 (-82.71%)
Mutual labels: clipboard
ClipboardText
Universal clipboard text support for PowerShell, notably also in PowerShell Core (cross-platform) and Windows PowerShell v2-v4
Stars: ✭ 37 (-86.09%)
Mutual labels: clipboard
ZetaHtmlEditControl
A small wrapper class around the Windows Forms 2.0 WebBrowser control.
Stars: ✭ 72 (-72.93%)
Mutual labels: clipboard
macos-receiver
A MacOS TabBar (StatusBar) application that securely receives one-time passwords (OTPs) that you tapped in Raivo for iOS.
Stars: ✭ 44 (-83.46%)
Mutual labels: clipboard
clipboard-files
A nodejs addon, read or write file path for clipboard, support win32 and mac osx.
Stars: ✭ 26 (-90.23%)
Mutual labels: clipboard
netflix-list-exporter
💫 An Extension to export your lists from Netflix to Clipboard area and share it with your friends.
Stars: ✭ 60 (-77.44%)
Mutual labels: clipboard
react-hook-clipboard
A React hook for accessing clipboard
Stars: ✭ 16 (-93.98%)
Mutual labels: clipboard
cotp
Trustworthy, encrypted, command-line TOTP/HOTP authenticator app with import functionality.
Stars: ✭ 45 (-83.08%)
Mutual labels: clipboard
pb
📋 Access HTML and other pasteboards from JS and command line
Stars: ✭ 31 (-88.35%)
Mutual labels: clipboard
Pasteboard Viewer
📋 Inspect the system pasteboards on macOS
Stars: ✭ 257 (-3.38%)
Mutual labels: clipboard
Use Clipboard Copy
📋 Lightweight copy to clipboard hook for React
Stars: ✭ 256 (-3.76%)
Mutual labels: clipboard
Desktop
A comprehensive solution for convenient and efficient work with notes, snippets, clipboard, files, and other information that requires quick access via any device.
Stars: ✭ 123 (-53.76%)
Mutual labels: clipboard
React-Clipboard
React wrapper for clipboard.js
Installation
$ npm i --save react-clipboard.js
Usage
You can use clipboard.js
original data-*
attributes:
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';
class MyView extends Component {
render() {
return (
<Clipboard data-clipboard-text="I'll be copied">
copy to clipboard
</Clipboard>
);
}
}
ReactDOM.render(<MyView/>, document.getElementById('app'));
-
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)
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 (
<Clipboard option-text={this.getText} onSuccess={this.onSuccess}>
copy to clipboard
</Clipboard>
);
}
}
ReactDOM.render(<MyView/>, 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
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 '<a>'
return (
<Clipboard component="a" button-href="#" data-clipboard-text="I'll be copied">
copy to clipboard
</Clipboard>
);
}
}
ReactDOM.render(<MyView/>, document.getElementById('app'));
Default html properties may be passed with the button-*
pattern:
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js';
class MyView extends Component {
render() {
return (
<Clipboard data-clipboard-text="I'll be copied" button-title="I'm a tooltip">
copy to clipboard
</Clipboard>
);
}
}
ReactDOM.render(<MyView/>, document.getElementById('react-body'));
License
This code is released under CC0 (Public Domain)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].