Nimble Package Maestros

    react-c2c

    1.0.1 • Public • Published


    react-c2c


    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

    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

    Install

    npm i react-c2c

    DownloadsWeekly Downloads

    10

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • solodynamo