Mui-react-chat NPM

ReactJS Chat UI

1. Installation

Using npm:

npm install sportstalk-react-chat --save

Using yarn:

yarn add sportstalk-react-chat

2. Dependency

This library version using the Sportstalk Chat SDK v3.17

2. Examples

import React from 'react'
import { SportstalkChat, MessageItemActions } from 'sportstalk-react-chat'

export function Example() {

 renderCustomActions = props =>
    <MessageItemActions {...props} onDeleteMessage={...} />


  return (
    <SportstalkChat
      appId={[YOUR_APP_ID]}
      apiToken={[YOUR_API_TOKEN]}
      renderActions={renderCustomActions}
    />
  )
}

3. Props

Name	Type	Required	Description
appId	string	Yes	Sportstalk app ID
apiToken	string	Yes	Sportstalk app token
ref	ReactRef	No	Access to Sportstalk Client SDK ( see here)
onSend	function	No	Callback function when user send message
renderLoading	function	No	Custom loading view compontnt when initializing app
renderAvatar	function	No	Custom message avatar
renderMessage	function	No	Custom text message
renderAdvertisement	function	No	Custom component for Advertisement messages
renderInputToolbar	function	No	Custom input bar
renderActions	function	No	Custom action on the right of the messages

4. Interfaces

Common message interface

interface IMessage {
  id: string;
  text: string;
  direction: Message.MessageDirection;
  createdAt?: string;
  updatedAt?: string;
  author?: TypedMessageAuthor;
  replyTo?: Partial<IMessage>;
  type?: Message.MessageType;
  reactions: TypedMessageReaction[];
  reports: TypedMessageReport[];
  customPayload?: any;
}

User interface

interface User {
  userid: string;
  handle?: string;
  handlelowercase?: string;
  displayname?: string;
  pictureurl?: string;
  profileurl?: string;
  banned?: boolean;
  shadowbanned?: boolean;
  role?: UserRole;
  customtags?: string[];
  shadowbanexpires?: string | null | undefined;
}