Comment on page
Customizing React UI
Swap out MinChat React UI comnponents with your own.
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.
import React from 'react';
import { MinChatUI } from '@minchat/reactui';
function App() {
return (
<MinChatUI
user={{username: "john", name: "John"}}
apiKey="AABBCCDDEEFFGGHHIIJJKKLL0"
// 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> }
renderChatListHeader={({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, isMobile}) => <div></div> }
renderIsTyping={({user, isMobile}) => <div></div> }
/>
);
}
export default App;
The
height
property is used to determine the height of the MinChat UI in CSS. the default value is 100vh
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.
renderChatList={({connectedUser, chats, loading, selectedChat, paginate, openChat, isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
connectedUser | The current User connected to minchat. | |
chats | An array of the chats, you can call functions of the chats such as getLastMessage() , getTitle() , etc. | |
loading | boolean | This property displays a loading state while the chats are being retrieved. |
selectedChat | 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 getId() , getTitle() , etc. | |
paginate | function | 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. |
openChat | function | This function is utilized to choose a specific chat for displaying its messages. |
isMobile | boolean | 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. |

renderChatItem={({chat, isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
chat | You can call functions of the chat such as getLastMessage() , getTitle() , etc. | |
isMobile | boolean | 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. |

renderEmptyChats={({isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
isMobile | boolean | 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. |

renderChatListHeader={({isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
isMobile | boolean | 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. |

renderLoader={({isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
isMobile | boolean | 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. |

renderMessageList={({connectedUser, messages, loading, paginate, typingUser, isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
connectedUser | The current User connected to minchat. | |
messages | An array of messages in a chat. | |
loading | boolean | This property displays a loading state while the messages are being retrieved. |
paginate | function | 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. |
typingUser | This refers to a user who is currently typing in the chat. It remains undefined when there is no user typing. | |
isMobile | boolean | 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. |

renderEmptyMessages={({isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
isMobile | boolean | 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. |

renderInput={({sendMessage, sendFile, inputProps, isMobile}) => <input {...inputProps} /> }
Property | Type | Description |
---|---|---|
sendMessage | function | Function to send message. sendMessage(text) |
sendFile | function | 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. |
inputProps | object | *Required: contains props that need to be added onto the input element of your component. <input {...inputProps} /> |
isMobile | boolean | 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. |

renderMessageListHeader={({heading, clearMessageList, isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
heading | string | The title of the chat. |
clearMessageList | function | This function is used to clear the currently selected chat and its messages. (i.e It can be invoked on a back button click) |
isMobile | boolean | 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. |
.png?alt=media&token=fc0daa1b-606d-4912-aa46-bf6e3d74cb97)
renderIsTyping={({user, isMobile}) => <div></div> }
Property | Type | Description |
---|---|---|
isMobile | boolean | 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. |
user | The user that is typing. |
Last modified 1mo ago