Copy to clipboard async

OSCC · JavaScript, Browser, String, Promise · Jan 11, 2022

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.

Recommended snippets