Skeleton
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 to be used as a base for the rendered skeleton
Anchor to skeletontextblockpropsSkeletonTextBlockProps
- string
A unique identifier for the component.
- Anchor to lineslinesnumberDefault: 1
Number of lines to display when no children are passed.
- Anchor to sizesizeTextSize
Size of the text the skeleton replaces.
TextSize
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'Size
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Was this section helpful?
Basic SkeletonTextBlock
import {
reactExtension,
SkeletonTextBlock,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <SkeletonTextBlock />;
}
Examples
Basic SkeletonTextBlock
React
import { reactExtension, SkeletonTextBlock, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return <SkeletonTextBlock />; }JS
import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const skeletonTextBlock = root.createComponent(SkeletonTextBlock); root.appendChild(skeletonTextBlock); });
Preview
