# ReactJS Chat UI

## 1. Installation

- Using npm:

```javascript
npm install sportstalk-react-chat --save
```

- Using yarn:

```javascript
yarn add sportstalk-react-chat
```

## 2. Dependency

This library version using the Sportstalk Chat SDK [v3.17](https://sportstalk-sdk-javascript.readthedocs.io/en/latest/)

## 2. Examples

```javascript
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](https://sportstalk-sdk-javascript.readthedocs.io/en/latest/)) |
| 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

```javascript
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

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