> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# useAppMessage

> Convenience hook for the daily-js sendAppMessage() method.

`useAppMessage({ onAppMessage?: Function}) : Object`

`useAppMessage` can also set up an optional callback for the [`app-message`](/reference/daily-js/events/messaging-events#app-message) event.

## Parameters

<ParamField body="onAppMessage" type="Function">
  Callback for the [`app-message`](/reference/daily-js/events/messaging-events#app-message) event. When an [`app-message`](/reference/daily-js/events/messaging-events#app-message) is sent, the callback will be called with two arguments:

  * `ev` (`Object`): The original [event payload](/reference/daily-js/events/messaging-events#app-message) sent from `daily-js`.
  * `sendAppMessage` (`Function`): The function reference that was created internally inside `useAppMessage`. This avoids having to call the hook twice in order to respond to an `app-message` with an `app-message`.
</ParamField>

## Return value

<ResponseField name="sendAppMessage" type="Function">
  Wraps [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message).
</ResponseField>

## Example

```jsx theme={null}
import { useAppMessage } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const AppMessageDemo = () => {
  const [messages, setMessages] = useState([]);

  const sendAppMessage = useAppMessage({
    onAppMessage: useCallback((ev) => setMessages((m) => [...m, ev]), []),
  });

  useEffect(() => {
    sendAppMessage({ msg: 'Hi, everyone' }, '*');
  }, [sendAppMessage]);

  return (
    <ul>
      {messages.map((ev) => (
        <li>
          {ev.fromId}: {JSON.stringify(ev.data)}
        </li>
      ))}
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code" iconType="solid">
    * [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message)
  </Card>

  <Card title="Events" icon="bolt" iconType="solid">
    * [app-message](/reference/daily-js/events/messaging-events#app-message)
  </Card>
</CardGroup>