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;
​
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
​
renderChatList={({connectedUser, chats, loading, selectedChat, paginate, openChat, isMobile}) => <div></div> }
​
Property
Type
Description
connectedUser
​User​
The current User connected to minchat.
chats
​Chats[]| undefined
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
​Chat| undefined
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.
Render Chat Item
​
renderChatItem={({chat, isMobile}) => <div></div> }
​
Property
Type
Description
chat
​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.
Render Empty Chats
​
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.
Render Chat List Header
​
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.
Render Loader
​
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.
Render Message List
​
renderMessageList={({connectedUser, messages, loading, paginate, typingUser, isMobile}) => <div></div> }
​
Property
Type
Description
connectedUser
​User​
The current User connected to minchat.
messages
​Message[]| undefined
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
​User| undefined
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.
Render Empty Messages
​
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.
Render Input
​
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.
Render Message List Header
​
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.
Render Is Typing
​
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
​User​
The user that is typing.

Property	Type	Description
`connectedUser`	`User`	The current User connected to minchat.
`chats`	`Chats[]\| undefined`	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`	`Chat\| undefined`	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.

Property	Type	Description
`chat`	`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.

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.

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.

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.

Property	Type	Description
`connectedUser`	`User`	The current User connected to minchat.
`messages`	`Message[]\| undefined`	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`	`User\| undefined`	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.

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.

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.

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.

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`	`User`	The user that is typing.

Last modified 1mo ago