unstable_Picker

Create an app and import the unstable_Picker module from @shopify/app-bridge/actions. This sample app is used throughout the examples below.

The following snippet creates a Picker with 2 resources. The first resource has 2 options. We're also specifying the title, search placeholder, and action labels.

The Picker has two main actions that you can subscribe to:

unstable_Picker.Action.SELECT - This action is dispatched when the user triggers the primary action. This action generally corresponds to a selection event. It receives a SelectPayload argument, which is an Object with id and selection keys. The selection key is an array of all the selected items.

unstable_Picker.Action.CANCEL - This action is dispatched when the user triggers the secondary action. This action generally corresponds to a cancelled event.

The Picker has the unstable_Picker.Action.SEARCH search action that you can subscribe to.

This action is dispatched when the user enters a search query string. It receives a SearchPayload argument, which is an Object with id and searchQuery. The searchQuery is a string.

The Picker has the unstable_Picker.Action.LOAD_MORE pagination action that you can subscribe to. To enable this option make sure to set canLoadMore to true when creating your picker instance.

This action is dispatched when the user reaches the bottom of the list of items. It does not have any arguments.

• default value: []
• optional
• type: BaseResource[]
• note: items takes an array of minimal resource objects, which only need to contain a resource id and a name value. A resource may also contain child options. For example:

• default value: []
• optional
• type: BaseResource[]
• note: selectedItems takes an array of minimal resource objects, which only need to contain a resource id (in GraphQL ID format, ie 'gid://shopify/Product/1'). Resources may also contain selected options. If no option is specified, all options are selected.

• default value: 0
• optional
• type: number
• note: Limits the total number of selections to a maximum of the passed value, or 0 for no limit.

• default value: undefined
• optional
• type: string
• note: Used as the title of the modal.

• default value: false
• optional
• type: boolean
• note: Indicates if the picker should be in a loading state.

• default value: undefined
• optional
• type: string
• note: Used as the placeholder in the search input.

• default value: undefined
• optional
• type: string
• note: The search query to be displayed in the search input field.

• default value: undefined
• optional
• type: string
• note: Label to be used on the primary action button.

• default value: undefined
• optional
• type: string
• note: Label to be used on the secondary action button.

• default value: false
• optional
• type: boolean
• note: Whether the Picker can load more items on the list.

• default value: false
• optional
• type: boolean
• note: Indicates if the Picker is currently loading more items.

• default value: undefined
• optional
• type: EmptySearchLabel
• note: emptySearchLabel takes an object that describes the interface of the picker when there is no item to display. For example:

You can subscribe to Picker actions by calling subscribe. This returns a method that you can call to unsubscribe from the action. For example:

You can call unsubscribe to remove all subscriptions on the picker:

You can call the set method with partial picker options. This automatically triggers the update action on the picker and merges the given options with the existing options:

Import the Provider and unstable_Picker component from @shopify/app-bridge-react.