MultinaireMessage

Programmatic message display component that shows alerts based on a message state.

Basic Usage

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

const [message, setMessage] = useState<string>();

<MultinaireMessage
  message={message}
  buttonTitle="OK"
  onPress={() => setMessage(undefined)}
/>

Props

Prop	Type	Default	Description
type	'dialog' | 'sheet'	'dialog'	Modal presentation type
title	string	-	Modal header title
message	string	-	Message to display (shows modal when set)
destructive	boolean	false	Use destructive styling
buttonTitle	string	-	Action button text
onPress	() => void	-	Button press handler

Examples

Error Message

const [error, setError] = useState<string>();

// Set error from API call
const handleSubmit = async () => {
  try {
    await submitForm();
  } catch (e) {
    setError(e.message);
  }
};

<MultinaireMessage
  title="Error"
  message={error}
  buttonTitle="OK"
  onPress={() => setError(undefined)}
/>

Success Message

const [successMessage, setSuccessMessage] = useState<string>();

<MultinaireMessage
  title="Success"
  message={successMessage}
  buttonTitle="Continue"
  onPress={() => {
    setSuccessMessage(undefined);
    navigation.goBack();
  }}
/>

Destructive Message

<MultinaireMessage
  type="dialog"
  title="Warning"
  message={warningMessage}
  destructive
  buttonTitle="I Understand"
  onPress={() => setWarningMessage(undefined)}
/>

note

The modal automatically opens when message is set and closes when cleared. This provides a declarative way to show alerts based on state.