Clipboard

Overview

A button to copy the text to the system clipboard. By default it will copy the current URL, but it can also copy the text of an element, or arbitrary content set as a property on the component.

Installation

npm install @patternfly/pfe-clipboard

Usage

Default

<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>

Optionally hide the icon

<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>

Override the link text

<pfe-clipboard role="button" tabindex="0">
  <span slot="text">You can copy this url</span>
</pfe-clipboard>

Copying text from element with custom button text

<pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
  <span slot="text">This will copy the text in the text field below!</span>
</pfe-clipboard>
<input type="text" id="textToCopy" value="This text will be copied!"></input>

Copying text from property

<pfe-clipboard role="button" tabindex="0" copy-from="property" id="propertyCopy">
</pfe-clipboard>
<script>
  window.addEventListener('load', function() {
    document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">\n      <span slot="text">This will copy the text in the text field below!</span>\n      <span slot="text--success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!11"></input>';
  })
</script>

Override the copied notification text

<pfe-clipboard role="button" tabindex="0">
  <span slot="text--success">URL Copied to clipboard</span>
</pfe-clipboard>

Override the icon

<pfe-clipboard role="button" tabindex="0">
  <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>

Override all slots

<pfe-clipboard role="button" tabindex="0">
  <span slot="text">Copy this article URL</span>
  <span slot="text--success">URL Copied to clipboard</span>
  <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>

Specify the amount of seconds the copy success text should be visible

<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>

Accessibility

<pfe-clipboard> implements many features of a standard button to provide an accessible experience for all users. By default, role="button" and tabindex="0" are added to inform assistive technology that <pfe-clipboard> should be treated as a button. It listens for mouse clicks as well as enter and space key presses per the recommendation of w3.org.

Slots

text

Optionally override the text of the button.

icon

Optionally override the default link svg icon. You can inline svg <svg slot="icon"></svg> or use pfe-icon. For example: <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>.

text--success

Optionally override the text of the success state which defaults to Copied.

Attributes

copy-from

Defaults to url, decides what should be copied. Possible values are:

• url Will copy the current page's URL.
• property Will copy the text from contentToCopy method of the component.
• A DOMString (e.g. #copyTarget or .code-sample pre) will use document.querySelector() with the given text to find first match and will use innerText on most elements or value on form fields to get text to be copied.

no-icon

Optional boolean attribute that, when present, removes the icon from the template.

copied-duration

Specify the amount of time in seconds the copy success text should be visible.

Methods

contentToCopy

A setter to set the content you would like to copy, only works if copy-from attribute is set to property. Recommend using pfe-clipboard:connected event to know when the component's setter is ready.

copyTextToClipboard()

Will copy the text the component is set to copy to the system clipboard

If available, it will use the new Navigator API to access the system clipboard. If unavailable, it will use the legacy execCommand("copy").

Returns

• Promise<string> text

document.querySelector("pfe-clipboard").copyTextToClipboard(text)
  .then(res => console.log(`Successfully copied: ${res}`))
  .catch(error => console.error(error));

copyURLToClipboard()

Deprecrated, will copy the current URL to the clipboard using copyTextToClipboard.

Returns

• Promise<string> url

document.querySelector("pfe-clipboard").copyURLToClipboard()
  .then(url => console.log(`Successfully copied: ${url}`))
  .catch(error => console.error(error));

Events

pfe-clipboard:connected

Let's you know when the component has run connectedCallback, useful for knowing when you can set the contentToCopy method and know that it will work.

pfe-clipboard:copied

Fires when the current url is successfully copied the user's system clipboard.

detail: {
  url: String
}

Styling hooks