Skip to Content
UI Components/Cupertino UI/Cupertino Modal Popup

Cupertino Modal Popup

Bottom sheet style modal popup for iOS

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

ModalPopup.tsx
1import { useRef } from 'react';
2import {
3  FlutterCupertinoModalPopup,
4  FlutterCupertinoModalPopupElement,
5} from '@openwebf/react-cupertino-ui';
6
7export function ModalPopupExample() {
8  const ref = useRef<FlutterCupertinoModalPopupElement>(null);
9
10  return (
11    <>
12      <FlutterCupertinoModalPopup ref={ref} height={240} onClose={() => console.log('Closed')}>
13        <div style={{ padding: 16 }}>Your content here…</div>
14      </FlutterCupertinoModalPopup>
15      <button onClick={() => ref.current?.show()}>Open Modal</button>
16    </>
17  );
18}

API Reference

Props (React)

NameTypeDefaultDescription
heightnumber-Fixed popup height (optional).
maskClosablebooleantrueWhether tapping the mask dismisses the popup.
backgroundOpacitynumber0.4Mask opacity (0–1).
onClose(event: CustomEvent<void>) => void-Fires when popup is dismissed.

Methods (React ref)

NameTypeDefaultDescription
show()() => void-Show the popup.
hide()() => void-Hide the popup.
Full type definitions: npm package docs.