React client SDK

The Chatkit React SDK builds on top of the general Chatkit JavaScript SDK to automatically inject Chatkit data and callbacks into your React application

This SDK is in Beta. We are expecting to make breaking changes in the future. If you have any feedback/suggestions please get in touch.

Installation

Install with a package manager like npm or yarn.

$ yarn add @pusher/chatkit-client-react

ChatkitProvider

The ChatkitProvider component creates a connection to Chatkit and injects a reference to the Chatkit SDK into the props of all Chatkit-compatible child components.

A child component is considered Chatkit-compatible if it is wrapped in one of the Chatkit higher-order-components

JAVASCRIPT

1
2
3
4
5
6
7
<ChatkitProvider
  instanceLocator={'<YOUR_INSTANCE_ID>'}
  tokenProvider={new TokenProvider({ url: '<YOUR_AUTH_URL>' })}
  userId={'<YOUR_USER_ID>'}
>
  <YourChatComponent />
</ChatkitProvider>

PropTypeDescription
instanceLocatorstring (required)Get this from your dashboard.
tokenProviderTokenProvider (required)Used to retrieve tokens to authenticate requests made to the Chatkit servers. See Token Provider.
userIdstring (required)The ID of the user that you wish to connect to Chatkit as. This will also be passed to the token provider and included in token requests as a query parameter in the form: user_id=<USER_ID>.

TokenProvider

See JavaScript SDK TokenProvider

withChatkit

A higher-order component that will inject a connected ChatManager and CurrentUser object into your component's props. All properties and methods are available on the currentUser and chatManager objects - please see their reference pages for more details.

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
const MyChatComponent = withChatkit(props => {
  props.chatkit.isLoading // True when the SDK is connected to Chatkit
  props.chatkit.currentUser // Reference to the CurrentUser object
  props.chatkit.chatManager // Reference to the ChatManager object
})

const App = props => {
  <div>
    <MyChatComponent />
  </div>
}

Input Props

None

Injected Props

PropTypeDescription
chatkit.isLoadingbooleanTrue when the SDK has connected to Chatkit, false otherwise
chatkit.currentUserCurrentUser objectSee CurrentUser
chatkit.chatManagerChatManager objectSee ChatManager

withChatkitOneToOne

A higher-order component that will inject all the Chatkit data and callbacks needed for the one-to-one chat use-case. See Creating one-to-one chat with react.

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const MyChatComponent = withChatkitOneToOne(props => {
  // Base Chatkit SDK
  props.chatkit.isLoading // True when the SDK is connected to Chatkit
  props.chatkit.currentUser // Reference to the CurrentUser object
  props.chatkit.chatManager // Reference to the ChatManager object

  // One-to-one chat data
  props.chatkit.otherUser // The other user in the chat
  props.chatkit.messages // Array of all the messages in the room
  props.chatkit.sendSimpleMessage // Sends a text-only message
  props.chatkit.sendMultipartMessage // Sends a multi-part message
  props.chatkit.sendTypingEvent // Triggers a typing event
  props.chatkit.setReadCursor // Sets the current user's read cursor
})

const App = props => {
  <div>
    <MyChatComponent
      otherUserId={'fred'}
    />
  </div>
}

Input Props

PropTypeDescription
otherUserId (required)stringThe ID of the user you would like to start a one-to-one chat with

Injected Props

PropTypeDescription
chatkit.isLoadingbooleanTrue when the SDK has connected to Chatkit, false otherwise
chatkit.currentUserCurrentUser objectSee CurrentUser
chatkit.chatManagerChatManager objectSee ChatManager
chatkit.otherUserOtherUser objectA OtherUser object representing the user you are currently talking to
chatkit.messagesarray of MessagesArray of all messages in the current one-to-one conversation.
chatkit.sendSimpleMessagefunctionMethod to send a text-only message in the current room. See sendSimpleMessage
chatkit.sendMultipartMessagefunctionMethod to send a multi-part message in the current room. See sendMultipartMessage
chatkit.sendTypingEventfunctionCall this method whenever the user presses a key when typing a new message to indicate that they are currently typing. See sendTypingEvent
chatkit.setReadCursorfunctionCall this method to set the current user's Read Cursor to the latest message. See setReadCursor

Method Definitions

sendSimpleMessage

Sends a text-only message to the current room

JAVASCRIPT

1
2
3
4
5
const MyChatComponent = withChatkitOneToOne(props => {
  props.chatkit.sendSimpleMessage({
    text: "Hi everyone!"
  })
});

Arguments

AttributeTypeDescription
textstringThe content of the message you would like to send

Returns

A promise that resolves to the newly-created Message object.

sendMultipartMessage

Method to send a multi-part message in the current room.

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const MyChatComponent = withChatkitOneToOne(props => {
  props.chatkit.sendMultipartMessage({
    parts: [
      {
        type: "text/plain",
        content: "Hi! Have some JSON!"
      },
      {
        type: "application/json",
        content: "{\"key\": \"value\"}"
      }
    ]
  })
});

Arguments

AttributeTypeDescription
partsarray of MessagePartsArray of message parts to be sent

Returns

A promise that resolves to the newly-created Message object.

sendTypingEvent

Call this method whenever the user presses a key when typing a new message to indicate that they are currently typing. Calls to this method are throttled for you by the SDK, it is safe to call whenever a key is pressed.

JAVASCRIPT

1
2
3
const MyChatComponent = withChatkitOneToOne(props => {
  props.chatkit.sendTypingEvent()
});

Arguments

None

Returns

A promise that resolves to undefined when the typing event has been sent

setReadCursor

Call this method to set the current user's Read Cursor to the latest message

JAVASCRIPT

1
2
3
const MyChatComponent = withChatkitOneToOne(props => {
  props.chatkit.setReadCursor()
});

Arguments

None

Returns

A promise that resolves to undefined when read cursor has been set

OtherUser

Object which represents the other user in the current conversation.

OtherUser Properties

AttributeTypeDescription
idstringThe unique identifier for the user on the instance.
namestringThe human readable name of the user. This is not required to be unique.
avatarURLstringThe location (url) of an avatar for the user.
presenceobjectAn object containing information regarding the user’s presence state. See user presence.
isTypingbooleanTrue when the other user in the conversation is typing and false otherwise.
lastReadMessageIdnumberID of the last message read by the other user