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.

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

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

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

show

hide

No arguments.

Refer to SaveActionOptions.

Refer to DiscardActionOptions.

ContextualSaveBar is a component that accepts props.

The ContextualSaveBar component accepts the following props:

Both the ContextualSaveBar component and the useContextualSaveBar hook use the following types: