frostzt/react-chat-engine

React component for a cheap and easy chat API

Chat Engine

Chat Engine is a free serverless chat API.

Try our free plan at chatengine.io

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 public key, username and user password

3. Install yarn add react-chat-engine

4. Import the ChatEngine component and pass in publicKey, userName, and userSecret props

5. Voila! You're done

EXAMPLE: Your implementation should look like the following

import React from 'react'

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

export function App() {
  return (
    <ChatEngine
      publicKey={'b75e5bd5-cd84-404c-b820-06feff8c98c0'}
      userName={'john_smith'}
      userSecret={'secret_1234'}
    />
  )
}

Features

• Authenticate users
• Subscribe (connect) to incoming chats and messages
• Create chats and messages
• Add and remove people from chats
• Edit and delete chat and message data

Props

• publicKey (UUID REQUIRED) - Public API key for your chatengine.io project
• userName (String REQUIRED) - Username of a person in this project
• userSecret (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)

Functions

import { functionName } from 'react-chat-engine'

...

functionName(conn, args)

• getChats (conn) => void - Get a person's array of chats
• newChat (conn, title) => void - Create a new chat with this person as admin
• editChat (conn, chatId, chatObj) => void - Edit the title of an existing chat
• deleteChat (conn, chatId) => void - If you're admin, delete this existing chat
• addPerson (props, chatId, userName) => void - Add an existing person (in the project) to an existing chat
• removePerson (props, chatId, userName) => void - If you're admin, remove this user from an existing chat
• getMessages (props, chatId) => void - Get the messages for an existing chat
• sendMessage (props, chatId, messageObj) => void - Send a new message object into this chat
• editMessage (props, chatId, messageId, messageObj) => void - Edit an exiting message object in this chat
• deleteMessage (props, chatId, messageId) => void - Delete an exiting message object from this chat

Objects

Chat Object

• id (int) - Unique primary key to identify this chat
• admin (String) - Unique username of the person who created this chat
• title (String) - Optional title of this chat
• created (Datetime) - Date-time of chat creation
• people (Array) - Array of people added to this chat

{
    "id": 1,
    "admin": "john_smith",
    "title": "Canada Day Party!",
    "created": "2020-09-05T20:28:22.352373Z",
    "people": [
        {
            "person": "john_smith"
        }
    ]
}

Chat / Person Association

• person (String) - Unique username of a person involved in this chat

{ person: "john_smith" }

Message Object

• id (int) - Unique primary key to identify this message
• sender (String) - Unique username of the person who sent this message
• text (String) - Contents of the message sent
• created (Datetime) - Date-time of message creation

{
    "id": 1,
    "sender": "john_smith",
    "text": "Hey let's party!",
    "created": "2020-09-07T13:20:26.936400Z"
}