Popup

Sheet/dialog modal component with built-in header and backdrop.

Basic Usage

import { Popup } from '@multinaire/ui';

<Popup
  title="Modal Title"
  renderToggleButton={({ onPress }) => (
    <Button title="Open" onPress={onPress} />
  )}
>
  <Typography>Modal content</Typography>
</Popup>

Props

Prop	Type	Default	Description
type	'sheet' | 'dialog'	'sheet'	Presentation style of the modal. 'dialog' centers the modal; 'sheet' slides up from the bottom
title	string	—	Title text displayed in the modal header
hideHeader	boolean	false	When true, the modal header (title bar) is hidden
renderToggleButton	(props) => ReactNode	—	Render prop that returns the button used to toggle the modal open/closed

usePopup Hook

Access modal context from within modal children for programmatic control.

import { usePopup } from '@multinaire/ui';

function ModalContent() {
  const { onRequestClose } = usePopup();

  return (
    <Button
      title="Close Modal"
      onPress={onRequestClose}
    />
  );
}

Hook Return Values

Property	Type	Description
onRequestClose	() => void	Callback invoked when the modal requests to be closed (e.g. back button, backdrop tap)
type	'sheet' | 'dialog'	Presentation style of the modal
title	string	Title text displayed in the modal header

Examples

Sheet Modal (Bottom Sheet)

<Popup
  type="sheet"
  title="Select Option"
  renderToggleButton={({ onPress }) => (
    <Button title="Open Sheet" onPress={onPress} />
  )}
>
  <Container padding="medium">
    <Typography>Sheet content slides up from bottom</Typography>
  </Container>
</Popup>

Dialog Modal (Centered)

<Popup
  type="dialog"
  title="Confirm Action"
  renderToggleButton={({ onPress }) => (
    <Button title="Open Dialog" onPress={onPress} />
  )}
>
  <Container padding="medium">
    <Typography>Centered dialog content</Typography>
  </Container>
</Popup>

Without Header

<Popup
  hideHeader
  renderToggleButton={({ onPress }) => (
    <Button title="Open" onPress={onPress} />
  )}
>
  <CustomHeader />
  <Typography>Custom header content</Typography>
</Popup>