# 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

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

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

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

```

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

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

  root.appendChild(skeletonTextBlock);
});

```

## SkeletonTextBlockProps

### SkeletonTextBlockProps

### emphasis

value: `"bold"`


### lines

value: `number`

Number of lines to display when no children are passed.

### size

value: `TextSize`

  - TextSize: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
  - Size: 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
Size of the text the skeleton replaces.

### id

value: `string`

A unique identifier for the component.