Contextual Save Bar

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

Create a contextual save bar instance with some initial options. Then dispatch a SHOW action to display it on the page.

You can modify the options at any time using the set method. If the contextual save bar is visible, the UI will update immediately.

Dispatch a HIDE action when you want to hide the contextual save bar.

Subscribe to the contextual save bar actions (ContextualSaveBar.Action.DISCARD and ContextualSaveBar.Action.SAVE) in order to do something when a merchant clicks the Save or Discard button. The subscribe method returns a function that you can call to unsubscribe from the action.

To hide the contextual save bar, dispatch a ContextualSaveBar.Action.HIDE action in the subscribe callback.

Call the unsubscribe method to remove all current subscriptions on the contextual save bar.

The App Bridge React library supports two ways of using the contextual save bar action.

• useContextualSaveBar hook
• ContextualSaveBar component

You can use either the hook or the component to add a contextual save bar to the app.

useContextualSaveBar is a hook that accepts no arguments and returns an object with the following methods and objects:

• show: ({fullWidth?: boolean; leaveConfirmationDisabled?: boolean}) => void;
• hide: () => void;
• saveAction: { setOptions: (options: SaveActionOptions) => void };
• discardAction: { setOptions: (options: DiscardActionOptions) => void };

See Props for complete API descriptions for these methods and objects.

ContextualSaveBar is a component that accepts props.

The useContextualSaveBar hook does not accept any props. The APIs for the methods and objects that the hook returns are as follows:

show

hide

No arguments.

See SaveActionOptions.

See DiscardActionOptions.

The ContextualSaveBar component accepts the following props.

Both the ContextualSaveBar component and the useContextualSaveBar hook make use of the following types.