---
name: Responsive
route: /responsive/
---

import { Playground } from 'docz';
import { Responsive, Stretch, Horizontal, Vertical, GLSDefaults } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Responsive 

Lays out children in a vertically or horizontally spaced layout based on given breakpoint ([default is 480][defaults]). 

> You'll have to resize the browser window to see the following examples in action 👍

As an example, resize your browser window to see the following layout change from horizontal to vertical at 600px:

<Playground>
  <Responsive breakpoint={600}>
    <Stretch style={{backgroundColor: "lightskyblue"}}>Hello</Stretch>
    <Stretch style={{backgroundColor: "lightpink"}}>World</Stretch>
  </Responsive>
</Playground>

Here is an example with left and right buttons collapsing into two rows at breakpoint: 

<Playground>
  <Responsive breakpoint={650} minWidth={250}>
    <Horizontal sizing="stretch">
      <demos.Button>Back 1</demos.Button>
      <demos.Button>Back 2</demos.Button>
    </Horizontal>
    <Horizontal sizing="stretch" horizontalAlign="right">
      <demos.Button>Next 1</demos.Button>
      <demos.Button>Next 2</demos.Button>
    </Horizontal>
  </Responsive>
</Playground>

Another similar example is a common layout in designs is tabular data that collapses:

<Playground>
  <Vertical style={{fontSize: '24px'}}>
    <GLSDefaults.Provider value={{breakpoint: 650}}>
      <Responsive>
        <Horizontal sizing="stretch">Price</Horizontal>
        <Horizontal sizing="stretch" horizontalAlign="right">12.34</Horizontal>
      </Responsive>
      <Responsive>
        <Horizontal sizing="stretch">GST</Horizontal>
        <Horizontal sizing="stretch" horizontalAlign="right">1.23</Horizontal>
      </Responsive>
    </GLSDefaults.Provider>
  </Vertical>
</Playground>

Another example is form inputs: 

<Playground>
  <Responsive breakpoint={600}>
    <Vertical sizing='stretch' spacing={5}>
      <demos.Label>First name</demos.Label>
      <demos.Input/>
    </Vertical>
    <Vertical sizing='stretch' spacing={5}>
      <demos.Label>Last name</demos.Label>
      <demos.Input/>
    </Vertical>
  </Responsive>
</Playground>

# Props 
Responsive props are categorized into *RootOnly*, *Modes* (vertical/horizontal mode) and *Overridable*.

## ResponsiveRootOnlyProps

These are props that impact the root tag generated by the `Responsive`. 

```ts
/** 
 * Props that can only be specified at the root of the `Responsive` 
 */
export interface ResponsiveRootOnlyProps extends
  StylesProp,
  StyleProp,
  ClassNameProp,
  TagProps,
  BreakpointProp {
}
```

> `StylesProp`, `StyleProp`, `ClassNameProp`, `TagProps` are all covered [in the common props section][common-types].

`BreakpointProp` is defined as: 

```ts
export interface BreakpointProp {
  /** 
   * windowWidth <= breakpoint : it is vertical (mobile)
   * else                      : it is horizontal (desktop)
   **/
  breakpoint?: number;
}
```
The default `breakpoint` is 480 [and can be configured][defaults].

## ResponsiveModesProps

`ResponsiveModesProps` consists of `vertical` and `horizontal` mode customizations: 

```ts
export interface ResponsiveModesProps {
  /** Vertical mode configuration */
  vertical?: ResponsiveVerticalModeProps;
  /** Horizontal mode configuration */
  horizontal?: ResponsiveHorizontalModeProps;
}
```
The alignment options differ by mode: 

* `vertical` supports the same alignment options offered the [Vertical component][vertical]. 
* `horizontal` supports the same alignment options offered the [Horizontal component][horizontal].

Both modes support the following common props: 

* `StylesProp`: allowing you to provide custom `styles` (as covered in [common props][common-types]) per mode.
* `ResponsiveOverridableProps`: Overridable props (covered in its own section below).

## ResponsiveOverridableProps

You can specify these props at the root, and optionally change their values for the specific mode. Some ways you could use these props:

* Only at the root (used for both modes).
* For specfic modes (used only in those mode).
* Combination: root + override-in-specific-mode.

```ts
/** 
 * Props that can be specified at
 * - root of `Responsive` 
 * - and overridden for `vertical`/`horizontal` modes
 */
export interface ResponsiveOverridableProps extends
  ScrollProp,
  PaddingProp,
  SizeProps,
  SizingProp,
  SpacingProp {
}
```

> `ScrollProp`, `PaddingProp`, `SizeProps`, `SizingProp`, `SpacingProp` are all covered [in the common props section][common-types].

As an example, below we have a responsive with a default spacing of `30px` but in vertical mode it has it changed to `10px` (`<Responsive spacing=30 vertical={spacing:10}/>`): 

<Playground>
  <Responsive breakpoint={600} style={{backgroundColor: 'gold'}} 
    spacing={30}
    vertical={{spacing: 10}}
  >
    <Stretch style={{backgroundColor: "lightskyblue"}}>Hello</Stretch>
    <Stretch style={{backgroundColor: "darkorange"}}>World</Stretch>
  </Responsive>
</Playground>


[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/
[defaults]:../defaults/
[vertical]:../vertical/
[horizontal]:../horizontal/