react-copy-content

Enable Click to Copy in your React Apps

Usage no npm install needed!

<script type="module">
  import reactCopyContent from 'https://cdn.skypack.dev/react-copy-content';
</script>

README

react-copy-content

A Fully Customizable Click-To-Copy Component for React

NPM JavaScript Style Guide

Demo

Demo

Checkout the Live Demo

Install

npm install --save react-copy-content

Usage

import ClickToCopy from 'react-copy-content'

<ClickToCopy contentToCopy="This will be copied to your clipboard." />

Props

contentToCopy: String

This is the text that will be copied. It is a required prop.

onCopy: function

<ClickToCopy
  contentToCopy="This will be copied to the clipboard"
  onCopy={() => console.log("copy")}
/>

This is the callback function triggered after the content is copied to the clipboard

render: function

<ClickToCopy
  contentToCopy="This will be copied to the clipboard"
  render={props => (
    <a href="#copy" onClick={props.copy}>
      Copy
    </a>
  )}
/>

To render a custom component in place of the button, use the render prop. Inside your custom component, use props.copy to trigger the copy action.

License

MIT © akshayymahajan