The `Features` action set enables you to get a list of features are available in the current app context, and to request features that are not currently available.

You can use the features action in the following ways:

1. [Plain JavaScript](#plain-javascript)
2. [React hooks](#react)

## Plain JavaScript

Using the plain JavaScript approach, there are two ways to work with features.

- Check feature availability with `App.featuresAvailable()`
- Dispatch a feature request action for a specific feature

### Example code

Import the `createApp` function from `@shopify/app-bridge` and the `Features` from `@shopify/app-bridge/actions`. Then use the `createApp` function to create an app.

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).


```js
import createApp from '@shopify/app-bridge';
import {Features, Group, Scanner} from '@shopify/app-bridge/actions';

const app = createApp(config);
```

### Subscribe to feature availability updates

```js
app.subscribe(Features.Action.UPDATE, function () {
  // This callback is a reminder that a feature's availability has
  // changed.
  // Call `app.featuresAvailable()` to get all available features
});
```

### App.featuresAvailable()

Calling `app.featuresAvailable()` returns a promise that evaluates to the entire set of available features for the app. An object containing groups, the actions within each group, and the permissions for each action (`Dispatch` and `Subscribe`), represents the feature set.

It will look like this:

```js
{
  cart: {
    dispatch: true,
    subscribe: true,
  }
  ...
}
```

If `Dispatch` is equal to `true`, then you will be able to send that type of action within your app. Likewise if `Subscribe` is equal to `true`, then you will be able to subscribe to dispatches of that type of action.

If a group is not present in the state then it can be assumed that all actions contained in that group are also not available.

```js
app.featuresAvailable().then(function (state) {
  /* All actions will be in the state object:
  {
    Cart: {...},
    Button: {...},
    Modal: {...},
    ...
    Scanner: {...},
    Share: {...}
  } */
});
```

If you want to limit your resulting state to a subset of groups, then pass in a group parameter.

```js
app.featuresAvailable(Group.Cart).then(function (state) {
  // state will contain only Cart actions
  /*
  {
    Cart: {
      FETCH: {
        Dispatch: false,
        Subscribe: false
      },
      REMOVE_LINE_ITEM_PROPERTIES: {
        Dispatch: false,
        Subscribe: false
      }
      ...
    }
  } */
});
```

Multiple group filters are also supported by using `...rest` parameters.

```js
app.featuresAvailable(Group.Cart, Group.Button, Group.Modal).then(function (state) {
  // state will contain only Cart, Button, and Modal actions
  /*
  {
    Cart: {...},
    Button: {...},
    Modal: {...}
  } */
});
```

### Cart

If you experience feature availability errors while trying to access Cart actions on Point of Sale, try wrapping that code in a subscription to `Features.Action.UPDATE`.

```js
// Subscribe to the features update action as early as possible
const unsubscribe = app.subscribe(Features.Action.UPDATE, function () {
  app.featuresAvailable(Group.Cart).then((features) => {
    const hasFetchCart = features.Cart[Cart.Action.FETCH];
    if (hasFetchCart) {
      unsubscribe();
      // Do something
    }
  });
});
```

### Features Update action

<table>
  <tr>
    <th>Group</th><td>Features</td>
  </tr>
  <tr>
    <th>Action</th><td>UPDATE</td>
  </tr>
  <tr>
    <th>Action Type</th><td>APP::FEATURES::UPDATE</td>
  </tr>
  <tr>
    <th>Description</th><td>Dispatches when a feature's available state changes.</td>
  </tr>
</table>

#### Response

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>Main</code></td>
      <td>Object</td>
      <td>The availability state of the features in the main context.</td>
    </tr>
    <tr>
      <td><code>Modal</code></td>
      <td>Object</td>
      <td>The availability state of the features in the modal context.</td>
    </tr>
  </tbody>
</table>

### Features Request action

<table>
  <tr>
    <th>Group</th><td>Features</td>
  </tr>
  <tr>
    <th>Action</th><td>REQUEST</td>
  </tr>
  <tr>
    <th>Action Type</th><td>APP::FEATURES::REQUEST</td>
  </tr>
  <tr>
    <th>Description</th><td>Requests for a feature to be enabled. May result in an authorization dialog to appear, depending on the platform it is dispatched on.</td>
  </tr>
</table>

If an action is not available when you call `app.featuresAvailable()`, then you can use the `APP::FEATURES::REQUEST` action to request either a group of actions or a single action inside a group to be enabled. This is particularly useful when the app is running on a mobile device and requesting a hardware feature, such as the scanner, that needs authorization from the user.

The workflow for enabling a feature includes two parts: subscribing to `APP::FEATURES::REQUEST::UPDATE` and dispatching `APP::FEATURES::REQUEST`. `APP::FEATURES::REQUEST` is the input and `APP::FEATURES::REQUEST::UPDATE` is the output.

Requesting Camera Scanner actions:

```js
var features = Features.create(app);
features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
  if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
    var Dispatch = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
    console.log("Camera Scanner has been ".concat(Dispatch ? "enabled" : "disabled"));
  }
});
features.dispatch(Features.Action.REQUEST, {
  feature: Group.Scanner,
  action: Scanner.Action.OPEN_CAMERA
});
```

#### Request

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>feature</code></td>
      <td>String</td>
      <td>The feature group that you would like to enable.</td>
    </tr>
    <tr>
      <td><code>action</code></td>
      <td>String?</td>
      <td>An optional action within the group to enable. All actions within the group will be enabled if an action is not specified.</td>
    </tr>
  </tbody>
</table>

### Features Request Update action

<table>
  <tr>
    <th>Group</th><td>Features</td>
  </tr>
  <tr>
    <th>Action</th><td>UPDATE</td>
  </tr>
  <tr>
    <th>Action Type</th><td>APP::FEATURES::UPDATE</td>
  </tr>
  <tr>
    <th>Description</th><td>Dispatches with the result of a features request action.</td>
  </tr>
</table>

#### Response

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>feature</code></td>
      <td>Object</td>
      <td>The new state of the requested feature.</td>
    </tr>
  </tbody>
</table>

### Application context

Shopify App Bridge applications can be opened in different places. We refer to each of these places as a **context**. Each context makes a set of features available to the application. Different contexts can provide different feature sets.

For instance, the **Modal** context has a different set of features available than the **Main** context.

> Note: The **Main** context is the default when running an embedded app using Shopify App Bridge. The context cannot be set externally, since it's determined automatically.

To check which context an application is in, you can use `app.getState()`. [Read more about `app.getState`](/docs/api/app-bridge/previous-versions/debugging#state).

```js
app.getState('context').then(function (context) {
  console.log('Context is: ', context); // Context is: Main
});
```

## React

With App Bridge React, you have two hooks that simplify using the feature action set.

- [useFeaturesAvailable](#usefeaturesavailable-hook)
- [useFeatureRequest](#usefeaturerequest-hook)

### `useFeaturesAvailable` hook

The `useFeaturesAvailable` hook accepts a feature name (or a list of feature names) and returns an object with information about its avaiable actions. If the hook receives no arguments, it returns an object with information about all of the features in App Bridge.

#### Example code

> Note
> When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


```jsx
import {useFeaturesAvailable} from '@shopify/app-bridge-react';

function MyComponent {
  const {ContextualSaveBar} = useFeaturesAvailable('ContextualSaveBar');

  if(ContextualSaveBar.dispatch) {
    ContextualSaveBar.dispatch(ContextualSaveBar.Action.SHOW)
  }

  ...
}
```

### `useFeatureRequest` hook

The `useFeatureRequest` hook enables you to request a group of actions, or a single action inside of a group, to be enabled. This is particularly useful when the app is running on a mobile device and requests a hardware feature, such as the scanner, that needs authorization from the user.

#### Example code

> Note
> When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


```jsx
import {Scanner} from '@shopify/app-bridge/actions';
import {useFeatureRequest, useAppBridge} from '@shopify/app-bridge-react';

function MyComponent {
  const app = useAppBridge()
  const scannerFeature = useFeatureRequest('Scanner');

  if(scannerFeature['APP::SCANNER::OPEN::CAMERA'].Dispatch) {
    app.dispatch(Scanner.Action.OPEN_CAMERA)
  }
}
```

### Props

- The `useFeaturesAvailable` hook accepts a single feature or a list of features.
- The `useFeatureRequest` accepts a single feature.

|Name|Type|Description|Required|
|---|---|---|---|
|feature|`"AuthCode"`, `"Button"`, `"ButtonGroup"`, `"Cart"`, `"Client"`, `"ContextualSaveBar"`, `"Error"`, `"Features"`, `"FeedbackModal"`, `"Fullscreen"`, `"LeaveConfirmation"`, `"Link"`, `"Menu"`, `"Modal"`, `"Navigation"`, `"Performance"`, `"Pos"`, `"Print"`, `"ResourcePicker"`, `"Scanner"`, `"SessionToken"`, `"Share"`, `"TitleBar"`, `"Toast"`|Name of the feature to check permissions for|No|