Skip to main content

Migrating to App Bridge 3.0

Anchor to App Bridge ReactApp Bridge React

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

Anchor to useContextualSaveBaruseContextualSaveBar

Anchor to 2.x.x2.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.

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

Anchor to 3.0.03.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.

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 for more details.

Anchor to useToastuseToast

Anchor to 2.x.x2.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.

const {show} = useToast()

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

Anchor to 3.0.03.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).

const {show} = useToast();

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

See useToast docs for more details.

Anchor to Other packagesOther packages

There are no breaking changes in the app-bridge or app-bridge-utils packages.

Was this page helpful?