@epsierra/react NPM

This library allows developers to integrate live chat into their websites. Visit the Epsierra Developer Documentation site for full documentation and prerequisites needed for setup.

Installation

You can install this component using Yarn or NPM:

yarn add @epsierra/react

npm install @epsierra/react

Dependecies

socket.io-client@4.8.1 is a peer-dependency for @react/epsierra You can install socket.io-client using Yarn or NPM:

yarn add socket.io-client@4.8.1

npm install socket.io-client@4.8.1

Usage

To use the LiveChat component, you need to provide the necessary props, including an apiKey, optional primaryColor, and custom render functions for messages. default value will be used for primaryColor, renderSenderMessage and renderRecipientMessage if not provided.

Example

"use client" // for nextjs

import { LiveChat } from '@epsierra/react';
import type { Message } from '@epsierra/react';

const App = () => {
  return (
    <LiveChat 
      apiKey="YOUR_API_KEY" 
      primaryColor="#6857C2"
      renderRecipientMessage={(message:Message ) => <CustomRecipientMessage {...message} />}
      renderSenderMessage={(message:Message) => <CustomSenderMessage {...message} />}
    />
  );
};

export default App;

Component Structure

LiveChat

This is the main component that initializes the chat interface. It manages the state for the client and handles modal visibility.

Props

apiKey (string): The API key for authentication.
primaryColor (string, optional): Primary color for UI elements.
renderRecipientMessage (function, optional): Custom renderer for recipient messages.
renderSenderMessage (function, optional): Custom renderer for sender messages.

Types

Message Type The Message type defines the structure of each message exchanged in the chat.

  type Message = {
  roomId: string;
  messageId: string;
  message: string;
  senderId: string;
  recipientId: string;
  status: "read" | "sent";
  sender: User;
  updatedAt: Date;
  createdAt: Date;
};