Shopify App Bridge introduces a new concept of actions. An action provides a way for applications and hosts to trigger events with a payload.

Use the actions with plain JavaScript or take advantage of the App Bridge React library. This page provides an overview of both approaches.

## Plain JavaScript

### Using CDN-hosted App Bridge

The code examples in this section assume you’re using modular JavaScript patterns. If you're using the CDN-hosted version of Shopify App Bridge, then you can achieve the same results by replacing imports with objects on the `window['app-bridge']` global.

Instead of:

```js
import { TitleBar } from '@shopify/app-bridge/actions';
```

Use:

```js
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
```

All other example code should function as-is.

### Simple actions

Both hosts, such as the Shopify admin or Shopify POS, and apps can dispatch actions.

### Example code

This example demonstrates the app setup and dispatching a `Redirect` action.

Import the `createApp` function from `@shopify/app-bridge` and the `Redirect` 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 { Redirect } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  host: host
});

// App dispatches a remote redirect action
app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com'
  })
);
```

### Action sets

Action sets group simple actions. Each instance of an action set has a unique ID that makes it possible for apps to subscribe to them. Think of action sets as a persisted set of actions that the app can dispatch or subscribe to at any time.

### Example code

This example demostrates the use of a Toast action set.

```js
const toastNotice = Toast.create(app, toastOptions);
toastNotice.subscribe(Toast.Action.SHOW, data => {
  // Do something with the show action
});

toastNotice.subscribe(Toast.Action.CLEAR, data => {
  // Do something with the clear action
});

// Dispatch the show Toast action, using the toastOptions above
toastNotice.dispatch(Toast.Action.SHOW);
```

## React

Shopify App Bridge offers React component wrappers for some actions. This is a great option if you are already using React and want to follow familiar patterns.

Like App Bridge itself, the App Bridge React component library is available [as a JavaScript module on npm](https://www.npmjs.com/package/@shopify/app-bridge-react).

You can access the App Bridge client `app` inside App Bridge React using the React Context API.
[See the `<Provider>` component for more information](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).

### Example code

This example demonstrates the app setup with React and using the React `TitleBar` component.

Import the [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react) and [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar) from `@shopify/app-bridge-react`. Create a configuration object with your client ID and [host](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app), then pass that object into the `Provider`.

> 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 React from 'react';
import ReactDOM from 'react-dom';
import {Provider, TitleBar} from '@shopify/app-bridge-react';

function MyApp() {
  const config = {
    // The client ID provided for your application in the Partner Dashboard.
    apiKey: "api_key",
    // The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin.
    host: "example.myshopify.com"
  };

  return (
    <Provider config={config}>
      <TitleBar title="My page title"/>
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<MyApp />);
```


## Using App Bridge React with Polaris

App Bridge React is fully compatible with [Polaris](https://polaris.shopify.com). While App Bridge provides access to features outside of your app, Polaris provides components to build within your app. To use both together, wrap your app in both Polaris’s `<AppProvider>` component as well as App Bridge React’s `<Provider>` component.

[See the `<Provider>` component for more information.](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#using-app-bridge-react-with-polaris)