Clipboard
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 onCopy
onCopy
() => void
Callback run when the copy to clipboard succeeds.
Anchor to onCopyError
onCopyError
() => void
Callback run when the copy to clipboard fails.
Anchor to text
text
string
Default: ''
Plain text to be written to the clipboard.
Was this section helpful?
Basic Copy to Clipboard
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"
/>
</>
);
}
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.
Was this section helpful?
Copying content of a QR code to the user's clipboard
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>
);
}
Preview
