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 React

App Bridge React is fully compatible with [Polaris React](https://polaris-react.shopify.com). While App Bridge provides access to features outside of your app, Polaris React provides components to build within your app. To use both together, wrap your app in both Polaris React’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-react)