# 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.

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

render('Checkout::Dynamic::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, extend} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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

value: `<T>(defaultValue: T) => StylesConditionalStyle<T, StylesBaseConditions>`

  - StylesConditionalStyle: export interface StylesConditionalStyle<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: StylesConditionalValue<T, AcceptedConditions>[];
}
  - StylesBaseConditions: export interface StylesBaseConditions {
  viewportInlineSize?: {min: 'small' | 'medium' | 'large'};
  hover?: true;
  focus?: true;
  resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
}
Sets an optional default value to use when no other condition is met.

### when

value: `<T>(conditions: StylesConditions, value: T) => StylesConditionalStyle<T, StylesBaseConditions>`

  - StylesConditionalStyle: export interface StylesConditionalStyle<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: StylesConditionalValue<T, AcceptedConditions>[];
}
  - StylesBaseConditions: export interface StylesBaseConditions {
  viewportInlineSize?: {min: 'small' | 'medium' | 'large'};
  hover?: true;
  focus?: true;
  resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
}
  - StylesConditions: export interface StylesConditions {
  viewportInlineSize?: {min: 'small' | 'medium' | 'large'};
  hover?: true;
  focus?: true;
}
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

### default

value: `T`

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

### conditionals

value: `StylesConditionalValue<T, AcceptedConditions>[]`

  - StylesConditionalValue: export interface StylesConditionalValue<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
An array of conditional values.

### StylesConditionalValue

### conditions

value: `AcceptedConditions`

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

### value

value: `T`

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

### StylesBaseConditions

### viewportInlineSize

value: `{ min: "small" | "medium" | "large"; }`


### hover

value: `true`


### focus

value: `true`


### resolution

value: `1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4`


### StylesConditions

### viewportInlineSize

value: `{ min: "small" | "medium" | "large"; }`


### hover

value: `true`


### focus

value: `true`


## Related

- [BlockLayout](blocklayout)
- [BlockSpacer](blockspacer)
- [BlockStack](blockstack)
- [Grid](grid)
- [GridItem](griditem)
- [Image](image)
- [InlineLayout](inlinelayout)
- [InlineSpacer](inlinespacer)
- [InlineStack](inlinestack)
- [List](list)
- [Pressable](pressable)
- [ScrollView](scrollview)
- [SkeletonImage](skeletonimage)
- [View](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 `small` breakpoint.

```tsx
<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 `loose` on hover.

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

```

## 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 `small` breakpoint.

```tsx
<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 `loose` on hover.

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

```