StyleHelper

This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.

Import the Style helper

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>
  );
}

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);
});

StyleHelper

DocsStyle

default

Sets an optional default value to use when no other condition is met.

when

Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied. The `when` method can be chained together to build more complex styles.

StylesConditionalStyle

conditionals

An array of conditional values.

default

The default value applied when none of the conditional values specified in `conditionals` are met.

StylesConditionalValue

conditions

The conditions that must be met for the value to be applied. At least one condition must be specified.

value

The value that will be applied if the conditions are met.

StylesBaseConditions

focus

hover

resolution

viewportInlineSize

ViewportInlineSize

'extraSmall' | 'small' | 'medium' | 'large'

StylesConditions

focus

hover

viewportInlineSize

Related

  • BlockLayout
  • BlockSpacer
  • BlockStack
  • Grid
  • GridItem
  • Image
  • InlineLayout
  • InlineSpacer
  • InlineStack
  • List
  • Pressable
  • ScrollView
  • SkeletonImage
  • View

Examples

This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.

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.

Default Style With Conditions

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

Default Style With Conditions

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

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.

Simple Condition

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

Simple Condition

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

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.

Conditionally hiding content

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

Conditionally hiding content

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