.. toctree::
   :maxdepth: 2
   :hidden:
         
##################
React Chat Library
##################


***************
1. Installation
***************

- Using npm:

.. code:: javascript

   npm install sportstalk-react-chat --save

- Using yarn:

.. code:: 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
***************

.. code:: 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

.. code:: 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

.. code:: 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;
  }