StyleHelper

Examples

• Import the Style helper

  React

  import {
    reactExtension,
    Style,
    View,
  } from '@shopify/ui-extensions-react/checkout';
  
  export default reactExtension('purchase.checkout.block.render', () => (
    <Extension />
  ));
  
  function Extension() {
    return (
      <View
        maxInlineSize={Style.default(200)
          .when({viewportInlineSize: {min: 'small'}}, 300)
          .when({viewportInlineSize: {min: 'medium'}}, 400)
          .when({viewportInlineSize: {min: 'large'}}, 800)}
      >
        Responsive Content
      </View>
    );
  }
  

  JS

  import {Style, View, extension} from '@shopify/ui-extensions/checkout';
  
  export default extension('purchase.checkout.block.render', (root) => {
    const view = root.createComponent(
      View,
      {
        border: 'base',
        padding: 'base',
        maxInlineSize: Style.default(200)
          .when({viewportInlineSize: {min: 'small'}}, 300)
          .when({viewportInlineSize: {min: 'medium'}}, 400)
          .when({viewportInlineSize: {min: 'large'}}, 800),
      },
      'Responsive Content',
    );
  
    root.appendChild(view);
  });
  

• Default Style With Conditions

  Description

  Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the <code>small</code> breakpoint.

  React

  <Grid
    columns={Style.default('fill').when({viewportInlineSize: {min: 'small'}}, [
      '30%',
      '70%',
    ])}
  >
    <View>Content</View>
    <View>Content</View>
  </Grid>;
  

• Simple Condition

  Description

  Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be <code>loose</code> on hover.

  React

  <Pressable
    onPress={() => alert('press')}
    border={Style.default(['base', 'dotted']).when(
      {viewportInlineSize: {min: 'small'}},
      ['base', 'dotted', 'none', 'base'],
    )}
  >
    Content
  </Pressable>;
  

• Conditionally hiding content

  Description

  Using the `display` property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.

  React

  <View
    display={Style.default('auto').when(
      {viewportInlineSize: {min: 'small'}},
      'none',
    )}
  >
    Content
  </View>;