react-copy-snippet

React component and hook for copying text from an HTML element.

Installation

If you prefer npm:

npm i react-copy-snippet

If you prefer yarn:

yarn add react-copy-snippet

usage

import CopySnippet from 'react-copy-snippet'
import { useRef } from 'react'

const Demo = () => {

  const snipRef = useRef(null)

  return (
    <div>
      <pre ref={snipRef}>
        this is an example text that is being copied.
      </pre>
      <CopySnippet ref={snipRef} />
    </div>
  )
}

export default Demo

if you just want to copy some text

import CopySnippet from 'react-copy-snippet'

const Demo = () => {

  return (
    <div>
      <CopySnippet text="hello world" />
    </div>
  )
}

export default Demo

we also have useCopyToClipboard hook

import CopySnippet, { useCopyToClipboard } from 'react-copy-snippet'
import { useRef } from 'react'

const Demo = () => {

  const snipRef = useRef(null)
  const {handleCopy, isCopied} = useCopyToClipboard({textContent: "hello world"})

  return (
    <div>
      <pre ref={snipRef}>
        this is an example text that is being copied.
      </pre>
      <CopySnippet ref={snipRef} />

      <button onClick={handleCopy}>{isCopied ? "copied!" : "copy"}</button>
    </div>
  )
}

export default Demo

Props

Name	Type	Description
text	string	The text content to be copied when using the component.
ref	React.RefObject	Reference to the HTML element from which to copy text.
Any HTML Attributes	-	Any additional HTML attributes to be passed to the underlying <button> element.