ResourcePicker
Setup and open
Import the Provider
and ResourcePicker
component from @shopify/app-bridge-react
. Only one Provider
is needed for your application.
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, ResourcePicker} from '@shopify/app-bridge-react';
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
return (
<Provider config={config}>
<ResourcePicker resourceType="Product" open />
</Provider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
Props
Name | Type | Description | Required |
---|---|---|---|
open | boolean |
Whether the picker is open or not | Yes |
resourceType | "Product" , "ProductVariant" , "Collection" |
The type of resource you want to pick | Yes |
initialQuery | string |
GraphQL initial search query for filtering resources available in the picker. See search syntax for more information | |
initialSelectionIds | Resource[] |
Resources that should be preselected when the picker is opened. See example below. | |
showHidden | boolean |
Whether to show hidden products or not | |
allowMultiple | boolean |
Whether to allow selection of multiple items. Deprecated: use selectMultiple instead. |
|
selectMultiple | boolean or number |
Whether to allow selecting multiple items or not. If a number is provided, then limit the selections to a maximum of that number of items. Requires version 1.28.0. | |
showVariants | boolean |
Whether to show product variants or not. Only applies to the product resource type picker. Requires version 1.28.0. | |
showDraft | boolean |
Whether to show draft products or not. Only applies to the Product resource type picker. Requires version 1.28.0. |
|
showArchived | boolean |
Whether to show archived products or not. Only applies to the Product resource type picker. Requires version 1.28.0. |
|
showDraftBadge | boolean |
Whether to show draft badge for draft products or not. Only works when the showDraft prop is set, and only applies to the Product resource type picker. Requires version 1.28.0. |
|
showArchivedBadge | boolean |
Whether to show archived badge for archived products or not. Only works when the showArchived prop is set, and only applies to the Product resource type picker. Requires version 1.28.0. |
|
onSelection | (selectPayload: SelectPayload) => void |
Callback when a selection has been made. It receives a SelectPayload argument, which is an Object with id and selection keys. The selection key is an array of all the selected resources. |
|
onCancel | () => void |
Callback when the picker is closed without selection |
initialSelectionIds
Use the initialSelectionIds
prop to specify resources that should already be selected when the picker is opened:
const productWithSpecificVariantsSelected = {
id: 'gid://Shopify/Product/12345',
variants: [{
id: 'gid://Shopify/ProductVariant/1',
}],
};
const productWithAllVariantsSelected = {
id: 'gid://Shopify/Product/67890',
};
function myComponent() {
return <ResourcePicker
initialSelectionIds={[
productWithVariantsSelected,
productWithAllVariantsSelected
]}
/>
}