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