SkeletonTextBlock

SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton

import {
  reactExtension,
  SkeletonTextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <SkeletonTextBlock />;
}

import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const skeletonTextBlock = root.createComponent(SkeletonTextBlock);

  root.appendChild(skeletonTextBlock);
});

SkeletonTextBlockProps

SkeletonTextBlockProps

emphasis

id

A unique identifier for the component.

lines

Number of lines to display when no children are passed.

size

Size of the text the skeleton replaces.

TextSize

Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'