Performant and lightweight copy 2 clipboard component for react applications.

Featured in:

• React Status
• Hashbang Weekly
• Stackshare

Highlights

• Can be easily integrated.
• Just ~ 1.4kb.
• No dependencies.
• Flexible (Uses render prop pattern)
• Configurable for debugging(through logs).

Comparison

react-copy-to-clipboard is very nice but

• react-c2c: 1.4 kB 🎉
• react-copy-to-clipboard: 1.7 kB

Installation

npm install --save react-c2c

yarn add react-c2c

Demo

https://solodynamo.github.io/react-c2c/

https://codesandbox.io/s/j314vk3r73

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {C2C} from 'react-c2c';
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
        this.state = {
            value: '',
        }
    }
 
    render() {
        return (
          <div>
            <input value={this.state.value}
              onChange={({target: {value}}) => this.setState({value, copied: false})} />
 
            <C2C
              text={this.state.value}
              render={({ copied, handleClick }) =>
                copied
                  ? <span style={{color: 'blue'}}>Copied !</span>
                  : <button onClick={handleClick}>Copy to clipboard</button>
              }
            />
 
 
          </div>
        );
    }
}
 
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(<App />, container);

props

text: PropTypes.string.isRequired

Text to be copied to clipboard.

render: PropTypes.func

Render prop, pass a function that accepts an object with two keys, handleClick and copied.

• handleClick should be called when you want copy event to be triggered. This should usually be assigned to an onClick event as browsers require user action for copy to work.

• copied would be true in case of successful copying.

children: PropTypes.func

You can also use children as a function pattern. The signature of this function is identical to that of render prop.

NOTE: Either one of render or children props is required and must be of type function.

options: PropTypes.shape({debug: bool})

Flag that enables logs for debugging.

<C2C text="Hi! 🌟 me">{({ copied, handleClick }) =>
  copied
    ? <span style={{color: 'blue'}}>Copied !</span>
    : <button onClick={handleClick}>Copy to clipboard</button>
}</C2C>

Support react-c2c

react-c2c is completely free and open-source. If you find it useful, you can show your support by 🌟 it or sharing it in your social network.

Contribute

Please do 🙂

License

MIT © Solodynamo