1.0.2 • Published 8 months ago

react-copy-snippet v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
8 months ago

react-copy-snippet

screenshot

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

NameTypeDescription
textstringThe text content to be copied when using the component.
refReact.RefObjectReference to the HTML element from which to copy text.
Any HTML Attributes-Any additional HTML attributes to be passed to the underlying <button> element.
1.0.2

8 months ago

1.0.1

8 months ago