import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as Stories from './Dimensions.stories.js';

<Meta title="APIs|Dimensions" />

# Dimensions

Note: dimensions may change (e.g., due to device rotation) so any rendering
logic or styles that depend on these constants should try to call this function
on every render, rather than caching the value.

## Methods

### get(dimension)

Get a dimension (e.g., `window` or `screen`).

```js
const { height, width } = Dimensions.get('window')
```

### set(dimensions)

This should only be called server-side with an estimate for initial dimensions
to be used when pre-rendering pages on the server.

```js
Dimensions.set({
  window: {
    height: estimatedHeight,
    width: estimatedWidth
  }
})
```

### addEventListener(type, handler)

Add an event handler. Supported events:

* `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is an object with `window` and `screen` properties whose values are the same as the return values of `Dimensions.get('window')` and `Dimensions.get('screen')`, respectively.

### removeEventListener(type, handler)

Remove an event handler.

## Example

<Preview withSource='none'>
  <Story name="stateChanges">
    <Stories.stateChanges />
  </Story>
</Preview>
