# Breakpoints

`terra-application` defines named sizes that correspond to ranges of viewport widths. It also provides a number of utilities
that can be used to detect and respond to breakpoint changes.

## Usage

```jsx
import breakpoints, { activeBreakpointForSize, breakpointIsActiveForSize } from 'terra-application/lib/breakpoints';
```

### `breakpoints`

An object containing a mapping of named breakpoint values to their minimum width value.

|Breakpoint Name|Minimum Value|Corresponding Media Query|Description|
|---|---|---|---|
|`tiny`|0px|`@media screen and (min-width: 0px)`| Active from viewport width 0px and up|
|`small`|544px|`@media screen and (min-width: 544px)`|Active from viewport width 544px and up|
|`medium`|768px|`@media screen and (min-width: 768px)`|Active from viewport width 768px and up|
|`large`|992px|`@media screen and (min-width: 992px)`|Active from viewport width 992px and up|
|`huge`|1216px|`@media screen and (min-width: 1216px)`|Active from viewport width 1216 and up|
|`enormous`|1440px|`@media screen and (min-width: 1440px)`|Active from viewport width 1440px and up|

### `activeBreakpointForSize(widthValue)`

`activeBreakpointForSize` will return the closest active breakpoint that matches the given width value.

```jsx
console.log(activeBreakpointForSize(300));  // 'tiny'
console.log(activeBreakpointForSize(544));  // 'small'
console.log(activeBreakpointForSize(800));  // 'medium'
console.log(activeBreakpointForSize(1000)); // 'large'
console.log(activeBreakpointForSize(1300)); // 'huge'
console.log(activeBreakpointForSize(1500)); // 'enormous'
```

### `breakpointIsActiveForSize(breakpointName, widthValue)`

`breakpointIsActiveForSize` will return a boolean value indicating whether or not the given breakpoint name is active for the width value.

> Note that since the breakpoints are defined as minimum values, a breakpoint will be determined to be active
> if the width value is larger than the defined minimum, even if the width value is included in a higher breakpoint range.

```jsx
console.log(breakpointIsActiveForSize('tiny', 300));      // true
console.log(breakpointIsActiveForSize('tiny', 544));      // true
console.log(breakpointIsActiveForSize('tiny', 800));      // true
console.log(breakpointIsActiveForSize('tiny', 1000));     // true

console.log(breakpointIsActiveForSize('medium', 300));    // false
console.log(breakpointIsActiveForSize('medium', 544));    // false
console.log(breakpointIsActiveForSize('medium', 800));    // true
console.log(breakpointIsActiveForSize('medium', 1500));   // true

console.log(breakpointIsActiveForSize('enormous', 300));  // false
console.log(breakpointIsActiveForSize('enormous', 544));  // false
console.log(breakpointIsActiveForSize('enormous', 800));  // false
console.log(breakpointIsActiveForSize('enormous', 1500)); // true
```

### Media Queries

`terra-application` also provides a set of Sass mix-ins that define media queries for the supported breakpoints.

```scss
@import '~terra-application/lib/breakpoints/media-queries';

.example {
  color: blue;

  @include terra-mq-small-up {
    color: red;
  }

  @include terra-mq-medium-up {
    color: purple;
  }

  @include terra-mq-large-up {
    color: green;
  }

  @include terra-mq-huge-up {
    color: yellow;
  }

  @include terra-mq-enormous-up {
    color: orange;
  }
}
```