Links

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 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> }
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, lastActive, isMobile}) => <div></div> }
renderIsTyping={({user, isMobile}) => <div></div> }
/>
);
}
export default App;

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

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, lastActive, 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)
lastActive
Date
shows the date when the other participant of the conversation was last active.
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.
Last modified 1mo ago