## App Bridge React

Migrating from 2.x.x to 3.0.0 may require some updates to your code if using `app-bridge-react`.

- [`useContextualSaveBar`](#usecontextualsavebar)
- [`useToast`](#usetoast)

### useContextualSaveBar

#### 2.x.x

In version 2.x.x, you called `useContextualSaveBar` with all of its options. It then created the contextual save bar instance and dispatched show and hide functions as an internal side effect based on the `visible` prop, as well as any changes in the options. It did not return anything.

```tsx
useContextualSaveBar({
  discardAction,
  saveAction,
  fullWidth,
  leaveConfirmationDisable,
  visible,
});
```

#### 3.0.0

In version 3.0.0, `useContextualSaveBar` becomes more declarative. You now call the hook without any props. It returns several objects and methods that you can use to update contextual save bar options, as well as to show and hide the component.

```tsx
const {show, hide, saveAction, discardAction} = useContextualSaveBar();
const fullWidth = true;
const leaveConfirmationDisabled = false;

<Button
  primary
  onClick={() => {
    show(fullWidth, leaveConfirmationDisabled);
    discardAction.setOptions({onAction: () => console.log('On discard')});
    saveAction.setOptions({onAction: () => console.log('On save')});
  }}
>
  Show ContextualSaveBar
</Button>
<Button onClick={hide}>Hide ContextualSaveBar</Button>
```

See [useContextualSaveBar docs](/docs/api/app-bridge/previous-versions/actions/contextualsavebar) for more details.

### useToast

#### 2.x.x

In version 2.x.x, `useToast` returns a `show` method that accepts one prop - an object with the following properties:

- `content`
- `duration`
- `isError`
- `onDismiss`

All the props except `content` are optional.

```tsx
const {show} = useToast()

show({
  content: 'Success!,
  duration: 2000,
  isError: false,
  onDismiss: () => console.log('Dismissed'),
})
```

#### 3.0.0

In version 3.0.0, the `content` moves to a top-level prop and the remaining properties are passed in as an optional `options` prop (all properties in the options object remain optional).

```tsx
const {show} = useToast();

show('Success!', {
  duration: 2000,
  isError: false,
  onDismiss: () => console.log('Dismissed'),
});
```

See [useToast docs](/docs/api/app-bridge/previous-versions/actions/toast) for more details.

## Other packages

There are no breaking changes in the [`app-bridge`](https://www.npmjs.com/package/@shopify/app-bridge) or [`app-bridge-utils`](https://www.npmjs.com/package/@shopify/app-bridge-utils) packages.