ClipboardItem

Enables clipboard functionality when its `id` is referenced by the `activateTarget` property of a `Button`, `Pressable`, or `Link` component. When activated, it copies the text to the clipboard and displays a `Tooltip` confirmation. `ClipboardItem` is a non-rendering component.

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

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

ClipboardItemProps

ClipboardItemProps

id

A unique identifier for the component.

onCopy

Callback run when the copy to clipboard succeeds.

onCopyError

Callback run when the copy to clipboard fails.

text

Plain text to be written to the clipboard.

Related

  • Button
  • Pressable
  • Link
  • QR Code

Examples

Enables clipboard functionality when its `id` is referenced by the `activateTarget` property of a `Button`, `Pressable`, or `Link` component. When activated, it copies the text to the clipboard and displays a `Tooltip` confirmation. `ClipboardItem` is a non-rendering component.

When displaying a QR code, include an alternative way for the user to get the content

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

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

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

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

Use the onCopy property to display an icon that swaps to a checkmark when the text is copied.

Swapping an icon when the text is copied

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

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

Swapping an icon when the text is copied

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

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