GridBottomSheet

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

UseGridBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

---

GridBottomSheet()

GridBottomSheet(__namedParameters): Element

A <Grid /> 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 <Grid /> so you can pass any props you would normally pass to a <Grid />

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 <Grid />.

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\<\<ItemT>(props) => ReactElement\<any, string | JSXElementConstructor\<any>>> & Omit\<FlatListProps\<ItemPair\<GridData>>, "data" | "renderItem"> & object & object

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)
const data = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }]

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <GridBottomSheet
      onDismiss={() => setIsVisible(false)}
      data={data}
      renderItem={({item}) => <Text>{item.text}</Text>}
    />
  ) : null}
</>)

---

useGridBottomSheet()

useGridBottomSheet(__namedParameters): object

Parameters

Parameter	Type
__namedParameters	UseGridBottomSheetProps

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

GridBottomSheet()

GridBottomSheet: (gridProps) => Element = GridBottomSheetComponent

Parameters

Parameter	Type
gridProps	Omit\<FlatListProps\<ItemPair\<GridData>>, "data" | "renderItem"> & object & object

Returns

Element

openBottomSheet()

openBottomSheet: () => void

Returns

void

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead