# Customizing React UI

MinChat provides the capability to substitute parts of the User Interface (UI) with your own by passing down render functions. This feature empowers you to modify, personalize, and conceal certain UI elements, thereby enabling you to customize the chat experience to suit your website's needs.

{% code fullWidth="false" %}

```javascript
import React from 'react';
import { MinChatUI } from '@minchat/reactui';

function App() {
	return (
		<MinChatUI
	        	user={{username: "john", name: "John"}}
		        apiKey="AABBCCDDEEFFGGHHIIJJKKLL0"
		
			// Customize functionality
			showAttachButton={false}
			showSendButton={false}
			disableInput={true}
			
			// Customize UI Components
			height='100vh'
		        themeColor='#6ea9d7'
		        renderChatList={({connectedUser, chats, loading, selectedChat, paginate, openChat, isMobile}) => <div></div> }
		        renderChatItem={({chat, isMobile}) => <div></div> }
			renderEmptyChats={({isMobile}) => <div></div> }
			renderLoader={({isMobile}) => <div></div> }
	  		renderMessageList={({connectedUser, messages, loading, paginate, typingUser, isMobile}) => <div></div> }
	  		renderEmptyMessages={({isMobile}) => <div></div> }
			renderInput={({sendMessage, sendFile, inputProps, isMobile}) => <input {...inputProps} /> }
	  		renderMessageListHeader={({heading, clearMessageList, lastActive, isMobile}) => <div></div> }
	  		renderIsTyping={({user, isMobile}) => <div></div> }
		/>
	);
}

export default App;
```

{% endcode %}

##

## Functionality Customization

### Hide File Attachment Button

the `showAttachButton` property is used to show or hide the file attachment button on the left of the message input. The default value is `true`.

### Hide Send Button

The `showSendButton` property is used to show or hide the send button on the right of the message input. The default value is `true`.

### Disable Message Input

The `disableInput` property is used to disable the message input field and not allow anything to be typed or sent. The default value is `false`.

##

## UI Customization

### Height

The `height` property is used to determine the height of the MinChat UI in CSS. the default value is `100vh`

### Theme

The `theme` property is used to set the color scheme of the MinChat User Interface (UI). It takes a CSS color code as its value.

### Render Chat List

<figure><img src="/files/baJfwKzoIvMKWlSEeO78" alt=""><figcaption></figcaption></figure>

```javascript

renderChatList={({connectedUser, chats, loading, selectedChat, paginate, openChat, isMobile}) => <div></div> }

```

<table><thead><tr><th width="182">Property</th><th width="224">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>connectedUser</code></td><td><a href="/pages/aPDOW0ZeC8SCmThYhzfg"><code>User</code></a></td><td>The current User connected to minchat.</td></tr><tr><td><code>chats</code></td><td><a href="/pages/f4MIOym3eJzAXzLLXniX"><code>Chats[]</code></a><code>| undefined</code></td><td>An array of the chats, you can call functions of the chats such as <code>getLastMessage()</code> , <code>getTitle()</code>, etc.</td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>This property displays a loading state while the chats are being retrieved.</td></tr><tr><td><code>selectedChat</code></td><td><a href="/pages/f4MIOym3eJzAXzLLXniX"><code>Chat</code></a><code>| undefined</code></td><td>The currently selected chat is considered the active chat. The messages displayed in the MessageList are from this active chat. you can call functions of the selectedChat such as <code>getId()</code> , <code>getTitle()</code>, etc.</td></tr><tr><td><code>paginate</code></td><td><code>function</code></td><td>This function is used to retrieve the next page of users. The chats are paginated, with 25 chats per page. The paginate function is throttled to avoid abuse.</td></tr><tr><td><code>openChat</code></td><td><code>function</code></td><td>This function is utilized to choose a specific chat for displaying its messages.</td></tr><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Chat Item

<figure><img src="/files/j472We7cO1Kl1cKnmtJN" alt=""><figcaption></figcaption></figure>

```javascript

renderChatItem={({chat, isMobile}) => <div></div> }

```

<table><thead><tr><th width="135">Property</th><th width="113">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>chat</code></td><td><a href="/pages/f4MIOym3eJzAXzLLXniX"><code>Chat</code></a></td><td>You can call functions of the chat such as <code>getLastMessage()</code> , <code>getTitle()</code>, etc.</td></tr><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Empty Chats

<figure><img src="/files/kQs1HoVKbNaU6jZiLeLl" alt=""><figcaption></figcaption></figure>

```javascript

renderEmptyChats={({isMobile}) => <div></div> }
  			  		
```

<table><thead><tr><th width="134">Property</th><th width="112">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Loader

<figure><img src="/files/KSiu6nruLzJhLV0IThpb" alt=""><figcaption></figcaption></figure>

```javascript

renderLoader={({isMobile}) => <div></div> }

```

<table><thead><tr><th width="134">Property</th><th width="112">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Message List

<figure><img src="/files/Nooe6kVNmssWnRjjf7ge" alt=""><figcaption></figcaption></figure>

```javascript

renderMessageList={({connectedUser, messages, loading, paginate, typingUser, isMobile}) => <div></div> }

```

<table><thead><tr><th width="183">Property</th><th width="245">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>connectedUser</code></td><td><a href="/pages/aPDOW0ZeC8SCmThYhzfg"><code>User</code></a></td><td>The current User connected to minchat.</td></tr><tr><td><code>messages</code></td><td><a href="/pages/kHDmp1Ige5MDBB56e34a"><code>Message[]</code></a><code>| undefined</code></td><td>An array of messages in a chat.</td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>This property displays a loading state while the messages are being retrieved.</td></tr><tr><td><code>paginate</code></td><td><code>function</code></td><td>This function is used to retrieve the next page of messages. The messages are paginated, with 25 messages per page. The paginate function is throttled to avoid abuse.</td></tr><tr><td><code>typingUser</code></td><td><a href="/pages/aPDOW0ZeC8SCmThYhzfg"><code>User</code></a><code>| undefined</code></td><td>This refers to a user who is currently typing in the chat. It remains undefined when there is no user typing.</td></tr><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Empty Messages

<figure><img src="/files/6iufbkGKyDcs6hrFMpAv" alt=""><figcaption></figcaption></figure>

```javascript

renderEmptyMessages={({isMobile}) => <div></div> }

```

<table><thead><tr><th width="134">Property</th><th width="112">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Input

<figure><img src="/files/ojPQpRuwC0gdr0wyMHkb" alt=""><figcaption></figcaption></figure>

```javascript

renderInput={({sendMessage, sendFile, inputProps, isMobile}) => <input {...inputProps} /> }

```

<table><thead><tr><th width="164">Property</th><th width="124">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>sendMessage</code></td><td><code>function</code></td><td>Function to send message. <code>sendMessage(text)</code></td></tr><tr><td><code>sendFile</code></td><td><code>function</code></td><td>This function is used to send a file. When invoked, it automatically opens a file picker. Once a user selects a file, the file is immediately sent in the chat.</td></tr><tr><td><code>inputProps</code></td><td><code>object</code></td><td><p><strong>*Required</strong>: contains props that need to be added onto the input element of your component.</p><p></p><p><code>&#x3C;input {...inputProps} /></code></p></td></tr><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Message List Header

<figure><img src="/files/WQ11bJzomvv3jo6fTIBq" alt=""><figcaption></figcaption></figure>

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong>renderMessageListHeader={({heading, clearMessageList, lastActive, isMobile}) => &#x3C;div>&#x3C;/div> }

</code></pre>

<table><thead><tr><th width="214">Property</th><th width="120">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>heading</code></td><td><code>string</code></td><td>The title of the chat.</td></tr><tr><td><code>clearMessageList</code></td><td><code>function</code></td><td>This function is used to clear the currently selected chat and its messages. (i.e It can be invoked on a back button click)</td></tr><tr><td><code>lastActive</code></td><td><code>Date</code></td><td>shows the date when the other participant of the conversation was last active.</td></tr><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr></tbody></table>

### Render Is Typing

<figure><img src="/files/VfMs8BJFAENOStiDZOnU" alt=""><figcaption></figcaption></figure>

```javascript

renderIsTyping={({user, isMobile}) => <div></div> }

```

<table><thead><tr><th width="134">Property</th><th width="112">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>isMobile</code></td><td><code>boolean</code></td><td>The MinChat UI view is considered to be in mobile mode when this property is true. You can use this to customize your component if you require different views for desktop and mobile.</td></tr><tr><td><code>user</code></td><td><a href="/pages/aPDOW0ZeC8SCmThYhzfg"><code>User</code></a></td><td>The user that is typing.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.minchat.io/customize-ui/customizing-react-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.