/react-chat-engine-advanced

Chat Engine's react components done the right way...

Primary LanguageTypeScriptMIT LicenseMIT

react-chat-engine

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.

  1. Register then create a project and user at chatengine.io

  2. Collect the Project ID / username / User Secret

  3. Install yarn add react-chat-engine

  4. Import MultiChatWindow, MultiChatSocket, and useMultiChatLogic

  5. Declare const props = useMultiChatLogic(projectId, username, secret); and pass the returning props object into MultiChatWindow and MultiChatSocket.

  6. 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)