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 {render, SkeletonTextBlock} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return ;
}

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

extend('Checkout::Dynamic::Render', (root) => {
  const skeletonTextBlock = root.createComponent(SkeletonTextBlock);

  root.appendChild(skeletonTextBlock);
});

SkeletonTextBlockProps

SkeletonTextBlockProps

emphasis

lines

Number of lines to display when no children are passed.

size

Size of the text the skeleton replaces.

id

A unique identifier for the component.

TextSize

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

Size

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