Copy Button

Summary

Default

import React from 'react'

import { CopyButton, Textarea } from 'playbook-ui'

const CopyButtonDefault = (props) => (
  <div>
    <CopyButton
        tooltipPlacement="right"
        tooltipText="Text copied!"
        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
    />

    <Textarea
        placeholder="Click the icon above to copy and paste here"
    />
  </div>
)

export default CopyButtonDefault

Button Variant

Pass in variant="button" to replace the Circle Icon Button with the Button kit. Set the button's text with the text prop.

import React from 'react'

import { CopyButton, Textarea } from 'playbook-ui'

const CopyButtonVariant = (props) => (
  <div>
    <CopyButton
        text="Copy Text"
        tooltipPlacement="right"
        tooltipText="Text copied!"
        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
        variant="button"
    />

    <Textarea
        placeholder="Copy and paste here"
    />
  </div>
)

export default CopyButtonVariant

Copy From

Provide an element's ID as the from parameter, and its text will be copied. If the element is an input, its value will be copied; otherwise, the innerText will be used. Additionally, if a value prop is provided, it will override the content from the from element and be copied instead.

import React, { useState } from 'react'

import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'

const CopyButtonFrom = (props) => {
  const [text, setText] = useState("Copy this text input text")

  const handleChange = (event) => {
    setText(event.target.value);
  }

  return (<div>
    <Body id="body">Copy this body text!</Body>
    <CopyButton
        from="body"
        marginBottom="sm"
        text="Copy Body text"
        tooltipPlacement="right"
        tooltipText="Body text copied!"
        variant="button"
    />

    <TextInput
        id="textinput"
        onChange={handleChange}
        value={text}
    />
    <CopyButton
        from="textinput"
        marginBottom="sm"
        text="Copy Text Input"
        tooltipPlacement="right"
        tooltipText="Text input copied!"
        variant="button"
    />

    <Textarea
        placeholder="Copy and paste here"
    />
  </div>
  )
}

export default CopyButtonFrom

Copy Hook

We provide a usePBCopy hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.

usePBCopy({ from: 'your_id' }) will grab the innerText from your_id element, or value if it is an input element.

import React, { useEffect, useState } from 'react'

import { usePBCopy, Body, Textarea, Tooltip } from 'playbook-ui'

const CopyButtonHook = ({...props}) => {
  // This is how you can use the copy button hook to copy text to the clipboard
  // eslint-disable-next-line no-unused-vars
  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
  // I added a tooltip so it looks better in the ui
  const [showTooltip, setShowTooltip] = useState(false)

  const handleCopy = () => {
    copyToClipboard()
    setShowTooltip(true)
    setTimeout(() => setShowTooltip(false), 1500)
  }

  useEffect(() => {
    const el = document.getElementById('hookbody')
    if (!el) return

    el.addEventListener('click', handleCopy)
    return () => {
      el.removeEventListener('click', handleCopy)
    }
  }, [copyToClipboard])

  return (
    <div>
      <Tooltip
          delay={{ close: 1000 }}
          forceOpenTooltip={showTooltip}
          placement="top"
          showTooltip={false}
          text="Copied!"
      >
        <Body
            cursor="pointer"
            id="hookbody"
            text="I'm a custom copy hook! Click this body to copy this text!"
        />
      </Tooltip>

      <Textarea
          placeholder="Paste here"
      />
    </div>
  )
}

export default CopyButtonHook

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat