TextContainer

TextContainer is used to wrap text elements such as TextBlock and Heading, and provide consistent vertical spacing.

Anchor to ExampleExample

import {extend, TextBlock, TextContainer} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const textContainer = root.createComponent(TextContainer, undefined, [

root.createComponent(TextBlock, undefined, 'TextBlock'),

]);

root.appendChild(textContainer);

});

import {render, TextContainer, TextBlock} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

<TextBlock>TextBlock</TextBlock>

</TextContainer>

);

}

import {extend, TextBlock, TextContainer} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const textContainer = root.createComponent(TextContainer, undefined, [
    root.createComponent(TextBlock, undefined, 'TextBlock'),
    root.createComponent(TextBlock, undefined, 'TextBlock'),
    root.createComponent(TextBlock, undefined, 'TextBlock'),
  ]);

  root.appendChild(textContainer);
});

import {render, TextContainer, TextBlock} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <TextContainer>
      <TextBlock>TextBlock</TextBlock>
      <TextBlock>TextBlock</TextBlock>
      <TextBlock>TextBlock</TextBlock>
    </TextContainer>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
alignment?	`"leading" \| "center" \| "trailing"`	Align children's on the horizontal axis
spacing?	`"xtight" \| "tight" \| "loose" \| "xloose"`	Adjust spacing between children

Was this page helpful?