react-chat-engine-components

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 --save
• Using Yarn: yarn add react-chat-engine

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 / myUsername / User Secret

• Install yarn add react-chat-engine

• Import the ChatEngine component and pass in projectId, myUsername, and mySecret props

• Voila! You're done

Example implementation ⬇️

import React from 'react';

import { ChatEngine } from 'react-chat-engine';

export function App() {
  return (
    <ChatEngine
      projectId="b75e5bd5-cd84-404c-b820-06feff8c98c0"
      myUsername="john_smith"
      mySecret="secret_1234"
    />
  );
}

Props

• projectId (String REQUIRED) - Public API key for your chatengine.io project
• myUsername (String REQUIRED) - myUsername of a person in this project
• mySecret (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)