# Message List Notifications

In this example, we demonstrate how to use the method `addNotification` pulled from the
[`ChannelActionContext`](/chat/docs/sdk/react/v11/components/contexts/channel-action-context#addNotification/) in order to add a custom
notification message to the `MessageList` at our desired time specification.

## addNotification Method

This method receives two arguments: text and type. The text parameter is the notification text, and the type
argument is of type string and is either 'success' or 'error'. The type determines the style added.
These messages are temporary in the list and are removed after five seconds.

This method is used extensively in the library by handler functions to notify of success or failure and are
usually used in conjunction with JavaScript event listeners or API event listeners.

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

## Implementation

In this quick implementation we will listen for the 'message.updated' client event and add our custom notification
when this happens. Editing or pinning a message will cause this event to occur.

<admonition type="note">

Since `addNotification` is drawn from the `ChannelActionContext`, we must create an inner component that is a child
of `Channel` and call the `useChannelActionContext` custom hook.

</admonition>

## The Code

```jsx
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-05-22T16:32:10.888Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/guides/customization/adding-messagelist-notification/](https://getstream.io/chat/docs/sdk/react/v11/guides/customization/adding-messagelist-notification/).