Skip to Content
UI Components/Cupertino UI/Cupertino Action Sheet

Cupertino Action Sheet

Bottom-anchored action sheet with multiple options

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

ActionSheet.tsx
1import { useRef } from 'react';
2import {
3  FlutterCupertinoActionSheet,
4  FlutterCupertinoActionSheetElement,
5} from '@openwebf/react-cupertino-ui';
6
7export function ActionSheetExample() {
8  const ref = useRef<FlutterCupertinoActionSheetElement>(null);
9
10  return (
11    <>
12      <FlutterCupertinoActionSheet
13        ref={ref}
14        onSelect={(e) => console.log('Selected:', e.detail)}
15      />
16      <button
17        onClick={() =>
18          ref.current?.show({
19            title: 'Choose an Option',
20            message: 'Select one of the following actions',
21            actions: [
22              { text: 'Option 1', event: 'option1' },
23              { text: 'Option 2', event: 'option2' },
24            ],
25            cancelButton: { text: 'Cancel', event: 'cancel' },
26          })
27        }
28      >
29        Show Action Sheet
30      </button>
31    </>
32  );
33}

API Reference

Props (React)

NameTypeDefaultDescription
onSelect(event: CustomEvent<{ text: string; event: string; index?: number; isDefault: boolean; isDestructive: boolean }>) => void-Fires when an action is selected (`event.detail` contains selection metadata).

Methods (React ref)

NameTypeDefaultDescription
show(options)(options: { title?: string; message?: string; actions?: Array<{ text: string; event?: string }>; cancelButton?: { text: string; event?: string } }) => void-Show the action sheet.
Full type definitions: npm package docs.