Clipboard Item
Enables clipboard functionality when its id
is referenced by the property of a
Button
, Pressable
, or Link
component. When activated, it copies the text to the clipboard and displays a Tooltip
confirmation.
is a non-rendering component.
Anchor to clipboarditempropsClipboardItemProps
- string
A unique identifier for the component.
- Anchor to onCopyonCopy() => void
Callback run when the copy to clipboard succeeds.
- Anchor to onCopyErroronCopyError() => void
Callback run when the copy to clipboard fails.
- Anchor to texttextstringDefault: ''
Plain text to be written to the clipboard.
ClipboardItemProps
- id
A unique identifier for the component.
string
- onCopy
Callback run when the copy to clipboard succeeds.
() => void
- onCopyError
Callback run when the copy to clipboard fails.
() => void
- text
Plain text to be written to the clipboard.
string
export interface ClipboardItemProps extends IdProps {
/**
* Plain text to be written to the clipboard.
*
* @default ''
*/
text?: string;
/**
* Callback run when the copy to clipboard succeeds.
*/
onCopy?: () => void;
/**
* Callback run when the copy to clipboard fails.
*/
onCopyError?: () => void;
}
Basic Copy to Clipboard
examples
Basic Copy to Clipboard
React
import { reactExtension, Button, ClipboardItem, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return ( <> <Button activateTarget="discount-code" activateAction="copy" > Copy discount code </Button> <ClipboardItem text="SAVE 25" id="discount-code" /> </> ); }
JS
import { extension, ClipboardItem, Button, } from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const button = root.createComponent( Button, { activateTarget: 'discount-code', }, 'Copy discount code', ); const clipboardItem = root.createComponent(ClipboardItem, { text: 'SAVE 25', id: 'discount-code', }); root.appendChild(button); root.appendChild(clipboardItem); });
Anchor to examplesExamples
Anchor to example-copying-content-of-a-qr-code-to-the-user's-clipboardCopying content of a QR code to the user's clipboard
When displaying a QR code, include an alternative way for the user to get the content
Anchor to example-swapping-an-icon-when-the-text-is-copiedSwapping an icon when the text is copied
Use the onCopy property to display an icon that swaps to a checkmark when the text is copied.
Copying content of a QR code to the user's clipboard
examples
Copying content of a QR code to the user's clipboard
description
When displaying a QR code, include an alternative way for the user to get the content
React
import { reactExtension, BlockStack, Button, ClipboardItem, QRCode, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const bitcoinAddress = '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd'; return ( <BlockStack maxInlineSize={200}> <QRCode size="fill" content={`bitcoin:${bitcoinAddress}`} /> <Button activateTarget="bitcoin-address"> Copy Bitcoin address </Button> <ClipboardItem text={bitcoinAddress} id="bitcoin-address" /> </BlockStack> ); }
JavaScript
import { extension, BlockStack, Button, ClipboardItem, QRCode, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root) => { const bitcoinAddress = '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd'; const qrCodeContent = `bitcoin:${bitcoinAddress}`; const qrCode = root.createComponent(QRCode, { content: qrCodeContent, size: 'fill', }); const clipboardItem = root.createComponent( ClipboardItem, { text: bitcoinAddress, id: 'bitcoin-address', }, ); const button = root.createComponent( Button, { activateTarget: 'bitcoin-address', }, 'Copy Bitcoin address', ); const blockStack = root.createComponent( BlockStack, { maxInlineSize: 200, }, ); blockStack.appendChild(qrCode); blockStack.appendChild(button); blockStack.appendChild(clipboardItem); root.appendChild(blockStack); }, );
Swapping an icon when the text is copied
description
Use the onCopy property to display an icon that swaps to a checkmark when the text is copied.
React
import {useState} from 'react'; import { reactExtension, Button, ClipboardItem, Icon, InlineStack, Text, } from '@shopify/ui-extensions-react/checkout'; import type {IconProps} from '@shopify/ui-extensions/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const [iconSource, setIconSource] = useState<IconProps['source']>('clipboard'); return ( <> <Button activateTarget="sample-id"> <InlineStack> <Text>Copy to clipboard</Text> <Icon source={iconSource} appearance="monochrome" /> </InlineStack> </Button> <ClipboardItem text="This text will be copied to the clipboard" id="sample-id" onCopy={() => { setIconSource('success'); setTimeout(() => { setIconSource('clipboard'); }, 2500); }} onCopyError={() => { setIconSource('error'); setTimeout(() => { setIconSource('clipboard'); }, 2500); }} /> </> ); }
JavaScript
import { extension, Button, ClipboardItem, Icon, InlineStack, Text, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root) => { const button = root.createComponent(Button, { activateTarget: 'sample-id', }); const inlineStack = root.createComponent( InlineStack, {}, ); const text = root.createComponent( Text, {}, 'Copy to clipboard', ); const icon = root.createComponent(Icon, { source: 'clipboard', appearance: 'monochrome', }); const clipboardItem = root.createComponent( ClipboardItem, { text: 'This text will be copied to the clipboard', id: 'sample-id', onCopy: () => { icon.updateProps({source: 'success'}); setTimeout(() => { icon.updateProps({ source: 'clipboard', }); }, 2500); }, onCopyError: () => { icon.updateProps({source: 'error'}); setTimeout(() => { icon.updateProps({ source: 'clipboard', }); }, 2500); }, }, ); button.appendChild(inlineStack); inlineStack.appendChild(text); inlineStack.appendChild(icon); root.appendChild(button); root.appendChild(clipboardItem); }, );
Preview
