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

<Meta title="APIs|AppState" />

# AppState

AppState can tell you if the app is in the foreground or background, and notify
you when the state changes. States: `active` (the app is running in the
foreground), `background` (the app is running in the background, i.e., the user
has not focused the app's tab).

## Properties

### isAvailable

Determines whether the browser environment supports `AppState`.

### currentState

Returns the current state of the app: "active" or "background".

## Methods

### addEventListener(type, handler)

Add a handler to AppState changes by listening to the `change` event type and
providing the handler. The handler is called with the app state value.

```js
AppState.addEventListener('change', (currentState) => {});
```

### removeEventListener(type, handler)

Remove a handler by passing the `change` event type and the handler.

AppState.removeEventListener('change', handler);

## Example

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