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> }
			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 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.