Simple React Clipboard

A simple and flexible React utility component for copying texts to the clipboard. Demo and sample code here.

Why This?

Existing React clipboard libraries are restrictive (e.g. you can only trigger copy on click / you must render a button or a span). Simple React Clipboard allows you to trigger copy whenever and however you want, with whatever component that fits your use case.

Getting Started

npm i simple-react-clipboard

The component passed in the render prop will have the copy function passed in as a prop. The copy function will copy the text prop to the clipboard.

import React from "react";
import Clipboard from "simple-react-clipboard";

const Demo = () => (
  <Clipboard
    text={"Copy on Button Click"}
    render={({copy}) => <button onClick={copy}>Copy</button>}
  />
)

export default Demo;

Props

Name	Type	Description	Required
render	function	A function that returns a React element.	Y
text	string	The text to be copied when copy is called.	Y
props	object	props to pass to the component in render	N
onSuccess	function	Function called when copy succeeds.	N
onError	function	Function called when copy fails.	N

To Run this Repository

1. git clone https://github.com/donfour/simple-react-clipboard.git
2. npm install
3. npm run dev

To Test this Repository

npm run test

Credits

This package is based on the awesome clipboard.js.