ClipboardItem

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);
  });
  

• 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);
    },
  );