# useMessages hook

the `useMessages` hook is used to interface with messages belonging to a [Chat](https://docs.minchat.io/react-sdk/conversation-chat).

{% code title="add to imports section" %}

```javascript
import { useMessages } from '@minchat/react';
```

{% endcode %}

## Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.

```javascript
const {
         messages,
         loading,
         error,
         paginate,
         paginateLoading,
         sendMessage,
         updateMessage,
         deleteMessage

      } = useMessages(chat)
```

<table><thead><tr><th width="205">Field</th><th width="135.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>messages</td><td><a href="../reference/message"><code>Message[]</code></a></td><td>the list of messages returned. this is automatically updated whenever a new message is received for the current conversation.</td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Shows the state of querying the messages, used to update your UI to show loading state.</td></tr><tr><td><code>error</code></td><td><code>object</code></td><td>an error object that is defined if an error occured while trying to query the messages.</td></tr><tr><td><code>sendMessage</code></td><td><code>function</code></td><td>function called to send a message to the conversation.</td></tr><tr><td><code>updateMessage</code></td><td><code>function</code></td><td>function called to update a specific message in a conversation.</td></tr><tr><td><code>deleteMessage</code></td><td><code>function</code></td><td>function called to delete a message in a conversation.</td></tr><tr><td><code>paginate</code></td><td><code>function</code></td><td>function called to get the next 25 messages, the messages are automatically added to the begining of the messages array.</td></tr><tr><td><code>paginateLoading</code></td><td><code>boolean</code></td><td>Shows the state of a paginated query for messages, used to update your UI to show pagination state. is true when the paginate function is called and is false when messages are returned.</td></tr></tbody></table>

## Send Message

To send a message, call the `sendMessage(...)` function from `useMessages` hook.

```javascript
const message = {
    text: "Hello World!"
}

const callback = (data)=> { /**      */}

sendMessage(message, callback) 
```

New messages received are automatically added to the `messages` variable of `useMessages(...)`

**`Message` Parameters**

<table><thead><tr><th width="140">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td><em>optional</em></td><td>the text of the message</td></tr><tr><td><code>file</code></td><td><code>File</code></td><td><em>optional</em></td><td>upload a file as an attachment</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td>optional</td><td>an optional key value pair for any additional message information such as custom font size, font type, or <code>JSON</code> formatted string. accepts string,number and boolean values</td></tr></tbody></table>

**`Callback`**&#x20;

<table><thead><tr><th width="125">Field</th><th width="133">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>data</code></td><td><a href="../reference/message"><code>Message</code></a></td><td>the message that was sent</td></tr></tbody></table>

## Update Message

To update a message, call the `updateMessage(...)` function from `useMessages` hook.

```javascript
const message = {
    text: "Updated Hello World!"
}

const callback = (data)=> { /**    
    do something
 */}

updateMessage(messageId, message, callback) 
```

messages are automatically updated in the `messages` variable of `useMessages(...)`

**Parameters**

<table><thead><tr><th width="148">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>messageId</code></td><td><code>string</code></td><td><em>required</em></td><td>the id of the message to be updated</td></tr></tbody></table>

**`Message` Parameters**

<table><thead><tr><th width="140">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td><em>optional</em></td><td>the text of the message</td></tr><tr><td><code>file</code></td><td><code>File</code></td><td><em>optional</em></td><td>upload a file as an attachment</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td>optional</td><td>an optional key value pair for any additional message information such as custom font size, font type, or <code>JSON</code> formatted string. accepts string,number and boolean values</td></tr></tbody></table>

**Callback**

<table><thead><tr><th width="125">Field</th><th width="133">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>data</code></td><td><a href="../reference/message"><code>Message</code></a></td><td>the message that was updated</td></tr></tbody></table>

## Delete Message

To delete a message, call the `deleteMessage(...)` function from `useMessages` hook.

<pre class="language-javascript"><code class="lang-javascript"><strong>deleteMessage(messageId)  
</strong></code></pre>

**Parameters**

<table><thead><tr><th width="151">Field</th><th width="107">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>messageId</code></td><td><code>string</code></td><td>the Id of the message to delete</td></tr></tbody></table>