ProductCardGridBottomSheet

@shopify/shop-minis-platform-sdk / components/BottomSheet/ProductCardGridBottomSheet

UseProductCardGridBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

---

ProductCardGridBottomSheet()

ProductCardGridBottomSheet(__namedParameters): Element

A <ProductCardGrid /> component wrapped in a <BottomSheet /> and configured for scroll-based animations.

The <BottomSheet /> will open on mount and closing must be handled using onDismiss. There are a few props specific to <BottomSheet /> but the rest of the API is the same as <ProductCardGrid /> so you can pass any props you would normally pass to a <ProductCardGrid />

The <BottomSheet /> will initially open to snapPoints.positionTwo (the lower position on screen) and the user will be able to toggle between snapPoints.positionTwo and snapPoints.positionOne (the higher position on screen) by tapping the header or by scrolling the <ProductCardGrid />.

The <BottomSheet /> can be closed by swiping down with enough force to "snap" or by pressing the close button (when present).

Parameters

Parameter	Type
__namedParameters	UseBottomSheetProps\<ForwardRefExoticComponent\<Omit\<FlatListProps\<any>, "data" | "renderItem"> & object & RefAttributes\<ProductCardGridRef>>> & Omit\<FlatListProps\<any>, "data" | "renderItem"> & object & RefAttributes\<ProductCardGridRef>

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)

const SHOP_GID = 'gid://something'
const products = getProductsFromSomewhere(SHOP_GID)

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <ProductCardGridBottomSheet
      onDismiss={() => setIsVisible(false)}
      products={products}
      renderItem={({product}) => (
        <TouchableProduct product={product} key={product.id}>
          <ProductCard shopId={SHOP_GID} product={product} />
        </TouchableProduct>
      )}
    />
  ) : null}
</>)

---

useProductCardGridBottomSheet()

useProductCardGridBottomSheet(__namedParameters): object

Parameters

Parameter	Type
__namedParameters	UseProductCardGridBottomSheetProps

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

openBottomSheet()

openBottomSheet: () => void

Returns

void

ProductCardGridBottomSheet()

ProductCardGridBottomSheet: (productCardGridProps) => Element = ProductCardGridBottomSheetComponent

Parameters

Parameter	Type
productCardGridProps	Omit\<FlatListProps\<any>, "data" | "renderItem"> & object & RefAttributes\<ProductCardGridRef>

Returns

Element

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead