30-seconds-of-code/snippets/js/s/copy-to-clipboard-async.md

title, type, language, tags, cover, dateModified

title	type	language	tags	cover	dateModified
Copy to clipboard async	snippet	javascript	browser string promise	armchair-design	2022-01-11T05:00:00-04:00

Copies a string to the clipboard, returning a promise that resolves when the clipboard's contents have been updated.

• Check if the Clipboard API is available. Use an if statement to ensure Navigator, Navigator.clipboard and Navigator.clipboard.writeText are truthy.
• Use Clipboard.writeText() to write the given value, str, to the clipboard.
• Return the result of Clipboard.writeText(), which is a promise that resolves when the clipboard's contents have been updated.
• In case that the Clipboard API is not available, use Promise.reject() to reject with an appropriate message.
• Note: If you need to support older browsers, you might want to use Document.execCommand() instead. You can find out more about it in the copyToClipboard snippet.

const copyToClipboardAsync = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};

copyToClipboardAsync('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.