react-chat-engine-advanced

Chat Engine

Chat Engine is a devevloper friendly Chat UI Kit.

Setup a free plan at chatengine.io

Features

• Typescript (since 2.0.0)
• Sign Up / Authentication
• Setup chats
• Send messages
• Send files and photos
• Subscribe to Chats via Sockets
• Invite / Remove chat members
• Endless Chat scrolling
• Endless Message scrolling

Installation

• Using npm: npm install react-chat-engine-advanced --save
• Using Yarn: yarn add react-chat-engine-advanced

Quick Start

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} />
    </>
  );
}

Props

• projectId (String REQUIRED) - Public API key for your chatengine.io project
• username (String REQUIRED) - username of a person in this project
• secret (String REQUIRED) - Set a secret for this person and use it to authenticate.
• onConnect (Function) - Callback when the connection/authentication is complete
• onFailAuth (Function) - Callback when the connection/authentication fails
• onGetChats (Function) Callback when the person fetches their chats array
• onNewChat (Function) - Callback when the person creates a new chat
• onEditChat (Function) - Callback when the person edits a chat title
• onDeleteChat (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 chat
• onRemovePerson (Function) - Callback when a person is removed/deleted from a chat
• onGetMessages (Function) - Callback when the person gets a chat's messages
• onNewMessage (Function) - Callback when a person posts a new message in one of the chats
• onEditMessage (Function) - Callback when a person edits a new message in one of the chats
• onDeleteMessage (Function) - Callback when a person deletes a new message in one of the chats
• hideUI (Boolean) - Hides all UI components for a custom implementation (Warning: Advanced)

Warning

react-chat-engine-advanced does not work with react StrictMode. Please remove <React.StrictMode> from your project.