# Message List Notifications

In this example, we show how to use `addNotification` from
[`ChannelActionContext`](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#addNotification/) via the `useChannelActionContext` hook to add a custom notification to `MessageList`.

## Best Practices

- Use `addNotification` for transient feedback, not persistent status.
- Keep notification text short and action-oriented.
- Subscribe to channel events inside `Channel` children only.
- Unsubscribe listeners on cleanup to avoid duplicate notifications.
- Throttle noisy events to prevent notification spam.

## addNotification Method

This method takes `text` and `type` (`'success'` or `'error'`). The type controls styling. Notifications are temporary and removed after ~5 seconds.

The SDK uses this in handlers to surface success/error events, often from client or API listeners.

```tsx
const addNotification = (text: string, type: "success" | "error") => {
  /// the rest of the method established in `Channel`
};
```

## Implementation

In this example, we listen for the `message.updated` event and add a notification. Editing or pinning a message triggers this event.

<admonition type="note">

Because `addNotification` comes from `ChannelActionContext`, the component must be a child of `Channel` and use `useChannelActionContext`.

</admonition>

## The Code

```tsx
const ChannelInner = () => {
  const { addNotification } = useChannelActionContext();
  const { channel } = useChannelStateContext();

  useEffect(() => {
    const clickToAddNotification = () => {
      addNotification("A message has been edited!", "success");
    };

    channel.on("message.updated", clickToAddNotification);

    return () => {
      channel.off("message.updated", clickToAddNotification);
    };
  }, [addNotification, channel]);

  return (
    <>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </>
  );
};

const App = () => (
  <Chat client={chatClient}>
    <ChannelList />
    <Channel>
      <ChannelInner />
    </Channel>
  </Chat>
);
```

## The Result

![Custom Notification in the Message List](@chat-sdk/react/v13/_assets/CustomNotification.png)


---

This page was last updated at 2026-04-21T07:55:47.877Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/customization/adding_messagelist_notification/](https://getstream.io/chat/docs/sdk/react/v13/guides/customization/adding_messagelist_notification/).