react-clippy

A Simple Copy to Clipboard React component.

Installation

Note! This package depends on React ^16

Using npm:

npm install --save @stagecraft/react-clippy

Using yarn:

yarn add @stagecraft/react-clippy

Usage

Clippy is just a Render Prop with two functions setTarget and setTrigger. Simply pass in your trigger and target elements and thats it.

import React from 'react';
import Clippy from 'react-clippy';

const App = () => (
  <Clippy>
    {(setTrigger, setTarget) => (
      <div>
        <span ref={el => setTarget(el)}>Revive clippy!</span>
        <button ref={el => setTrigger(el)}>Copy</button>
      </div>
    )}
  </Clippy>
);

export default App;

API

<Clippy>

| Prop | Type | Description | | ----------- |:----:| :--------------------------------------------------| | onCopy | func | callback that fires when text has been copied | | noSelection | bool | Disable selection of the copied text | | children | func | The render prop that should return a React element |