Skip to Content
UI Components/Cupertino UI/Cupertino Context Menu

Cupertino Context Menu

Long-press context menu with peek and pop animations

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

ContextMenu.tsx
1import { useEffect, useRef } from 'react';
2import {
3  FlutterCupertinoContextMenu,
4  FlutterCupertinoContextMenuElement,
5} from '@openwebf/react-cupertino-ui';
6
7export function ContextMenuExample() {
8  const ref = useRef<FlutterCupertinoContextMenuElement>(null);
9
10  useEffect(() => {
11    ref.current?.setActions([
12      { text: 'Open', event: 'open' },
13      { text: 'Rename', event: 'rename' },
14      { text: 'Delete', event: 'delete', destructive: true },
15    ]);
16  }, []);
17
18  return (
19    <FlutterCupertinoContextMenu ref={ref} onSelect={(e) => console.log(e.detail)}>
20      <div style={{ padding: 16, borderRadius: 12, background: '#e0f2fe' }}>
21        Long-press me
22      </div>
23    </FlutterCupertinoContextMenu>
24  );
25}

API Reference

Props (React)

NameTypeDefaultDescription
enableHapticFeedbackbooleanfalseEnable haptics when menu opens.
onSelect(event: CustomEvent<{ index: number; text: string; event: string }>) => void-Fires when an action is selected.

Methods (React ref)

NameTypeDefaultDescription
setActions(actions)(actions: Array<{ text: string; icon?: string; destructive?: boolean; default?: boolean; event?: string }>) => void-Set the actions displayed by the menu.
Full type definitions: npm package docs.