Chat Engine is a devevloper friendly Chat UI Kit.
Setup a free plan at chatengine.io
npm install react-chat-engine-advanced --save
yarn add react-chat-engine-advanced
Add serverless chat to your React app in 3 minutes.
Register then create a project and user at chatengine.io
Collect the Project ID / username / User Secret
Install yarn add react-chat-engine-advanced
Import MultiChatWindow
, MultiChatSocket
, and useMultiChatLogic
Declare const props = useMultiChatLogic(projectId, username, secret);
and pass the returning props
object into MultiChatWindow
and MultiChatSocket
.
Voila! You're done
Example implementation ⬇️
import React from 'react';
import {
ChatEngine,
MultiChatSocket,
useMultiChatLogic,
} from 'react-chat-engine-advanced';
export function App() {
const chatProps = useMultiChatLogic(
'b75e5bd5-cd84-404c-b820-06feff8c98c0',
'john_smith',
'secret_1234'
);
return (
<>
<MultiChatWindow {...chatProps} />
<MultiChatSocket {...chatProps} />
</>
);
}
projectId
(String REQUIRED) - Public API key for your chatengine.io projectusername
(String REQUIRED) - username of a person in this projectsecret
(String REQUIRED) - Set a secret for this person and use it to authenticate.onConnect
(Function) - Callback when the connection/authentication is completeonFailAuth
(Function) - Callback when the connection/authentication failsonGetChats
(Function) Callback when the person fetches their chats arrayonNewChat
(Function) - Callback when the person creates a new chatonEditChat
(Function) - Callback when the person edits a chat titleonDeleteChat
(Function) - Callback when the person deletes one of their chats (must the chat's admin)onAddPerson
(Function) - Callback when a person is added to a chatonRemovePerson
(Function) - Callback when a person is removed/deleted from a chatonGetMessages
(Function) - Callback when the person gets a chat's messagesonNewMessage
(Function) - Callback when a person posts a new message in one of the chatsonEditMessage
(Function) - Callback when a person edits a new message in one of the chatsonDeleteMessage
(Function) - Callback when a person deletes a new message in one of the chatshideUI
(Boolean) - Hides all UI components for a custom implementation (Warning: Advanced)react-chat-engine-advanced
does not work with react StrictMode. Please remove <React.StrictMode>
from your project.