MultinaireModal

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

Basic Usage

import { MultinaireModal } from '@multinaire/multinaire-design';

<MultinaireModal
  title="Modal Title"
  renderToggleButton={({ onPress }) => (
    <MultinaireButton title="Open" onPress={onPress} />
  )}
>
  <MultinaireText>Modal content</MultinaireText>
</MultinaireModal>

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

useMultinaireModal Hook

Access modal context from within modal children for programmatic control.

import { useMultinaireModal } from '@multinaire/multinaire-design';

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

  return (
    <MultinaireButton
      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)

<MultinaireModal
  type="sheet"
  title="Select Option"
  renderToggleButton={({ onPress }) => (
    <MultinaireButton title="Open Sheet" onPress={onPress} />
  )}
>
  <MultinaireContainer padding="medium">
    <MultinaireText>Sheet content slides up from bottom</MultinaireText>
  </MultinaireContainer>
</MultinaireModal>

Dialog Modal (Centered)

<MultinaireModal
  type="dialog"
  title="Confirm Action"
  renderToggleButton={({ onPress }) => (
    <MultinaireButton title="Open Dialog" onPress={onPress} />
  )}
>
  <MultinaireContainer padding="medium">
    <MultinaireText>Centered dialog content</MultinaireText>
  </MultinaireContainer>
</MultinaireModal>

Without Header

<MultinaireModal
  hideHeader
  renderToggleButton={({ onPress }) => (
    <MultinaireButton title="Open" onPress={onPress} />
  )}
>
  <CustomHeader />
  <MultinaireText>Custom header content</MultinaireText>
</MultinaireModal>