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'	Modal presentation style
title	string	-	Modal header title
hideHeader	boolean	false	Hide the modal header
renderToggleButton	(props) => ReactNode	-	Render function for toggle button

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	Function to close the modal
type	'sheet' | 'dialog'	Current modal type
title	string	Modal title

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>