JSPM – react-c2c@1.0.1

Package Exports

react-c2c

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-c2c) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Performant and lightweight copy 2 clipboard component for react applications.

Featured in:

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 🙂

react-c2c