React Chat Library

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;
}