> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.
# useMessages
> The useMessages hook is part of the Ollie Shop React library and provides functionality to manage notification messages across the application.
The `useMessages` hook provides a way to manage application messages (notifications, alerts, etc.) in a React application. It allows you to add, remove, and clear messages throughout your application.
## **Import**
```typescript theme={"system"}
import { useMessages } from '@ollie-shop/sdk';
```
## **Usage**
```typescript theme={"system"}
const { messages, addMessage, removeMessage, clearAll } = useMessages();
// Add a new message
addMessage({
type: 'success',
content: 'Order completed successfully!'
});
// Remove a specific message
removeMessage(messageId);
// Clear all messages
clearAll();
```
## **Return Value**
Returns an object with:
* `messages: Message[]` - Array of all current message objects
* `addMessage: (message: AddMessageInput) => void` - Function to add a new message. Accepts either a `content` (a direct message) or an `error` (a `ServerError`, automatically resolved into a localized message via translations)
* `removeMessage: (messageId: string) => void` - Function to remove a message by its ID
* `clearAll: () => void` - Function to remove all messages
## **Message Object**
Each message in the `messages` array has the following structure:
```typescript theme={"system"}
{
id: string; // Automatically generated unique ID
type: enum; // Type of message (e.g., 'success', 'error', 'info', 'warning')
content: string; // The actual message content
title?: string; // Optional title for the message
}
```
Message is described by the following structure:
| Property | Type | Description |
| :-------- | :------- | :-------------------------------------------------------------- |
| `id` | `string` | A unique identifier for the message (automatically generated) |
| `type` | `enum` | The type of message `info` \| `success` \| `warning` \| `error` |
| `content` | `string` | The main text content of the message |
| `title` | `string` | Optional title for the message |
## **Example**
The example below shows two different messages, a `success` and an `error`
| Desktop | Mobile |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| | |
To achieve the result in the example above :
```tsx theme={"system"}
import React from 'react';
import { useMessages } from '@ollie-shop/sdk';
function NotificationSystem() {
const { messages, addMessage, clearAll } = useMessages();
// Create a success message
const handleSuccess = () => {
addMessage({
type: 'success',
title: 'Order Placed',
content: 'Your order has been successfully placed.',
});
};
// Create an error message
const handleError = () => {
addMessage({
type: 'error',
content: 'Unable to process your request. Please try again.',
});
};
return (
{messages.length > 0 && (
)}
);
}
```
## Examples per Action
### addMessage(message)
Adds a new message to the message stack.
#### Parameters
* `message`: an `AddMessageInput`. Provide **either** `content` (a direct message) **or** `error` (a `ServerError` to auto-resolve a localized message). `type` is required; `title` is optional.
```tsx theme={"system"}
// Direct message
addMessage({
type: 'success',
title: 'Order Placed',
content: 'Your order has been successfully placed.'
});
// Auto-resolved from a ServerError (e.g. an action's onError handler).
// The localized text is resolved from the error's platformCode / code /
// errorGroup via translations, falling back to a generic message.
addMessage({
type: 'error',
error: serverError,
});
```
### removeMessage(messageId)
Removes a specific message from the stack by its ID.
#### Parameters
* `messageId`: `id` of the message to remove
```tsx theme={"system"}
...
removeMessage('message-uuid-123');
...
```
Messages are **not** dismissed automatically. They stay in the stack until you
remove them with `removeMessage(id)` or `clearAll()`. The rendering layer is
responsible for any auto-dismiss behavior.
### clearAll()
Removes all messages from the message stack.
```tsx theme={"system"}
...
clearAll();
...
```
###
| 
|
To achieve the result in the example above :
```tsx theme={"system"}
import React from 'react';
import { useMessages } from '@ollie-shop/sdk';
function NotificationSystem() {
const { messages, addMessage, clearAll } = useMessages();
// Create a success message
const handleSuccess = () => {
addMessage({
type: 'success',
title: 'Order Placed',
content: 'Your order has been successfully placed.',
});
};
// Create an error message
const handleError = () => {
addMessage({
type: 'error',
content: 'Unable to process your request. Please try again.',
});
};
return (