Inbox

You can use all options in Talk.InboxOptions as props to fine-tune the behavior of your chat UI.

If any of these props change, <Inbox> will apply it directly through a setter such as setFeedFilter. If no such setter exists, it will recreate the Talk.Inbox.

See below for an example of how to use inbox options.

You can pass all events (methods with names starting with on) accepted by the Inbox in the JavaScript SDK to the Inbox component as props with the same name.

See below for an example of how to use event props.

Create an inbox and load the existing conversation with an id of welcome:

1import { Inbox } from '@talkjs/react';
2
3// ...
4
5<Inbox
6  conversationId="welcome"
7  style={{ width: 400, height: 600 }}
8  className="chat-container"
9/>;

Create or update user data with the syncConversation prop. This prop expects a callback that uses the regular TalkJS JavaScript SDK to create a ConversationBuilder object with getOrCreateConversation:

1import { useCallback } from 'react';
2import { Inbox } from '@talkjs/react';
3import Talk from 'talkjs';
4
5// ...
6
7const syncConversation = useCallback((session: Talk.Session) => {
8  // regular TalkJS JavaScript code here
9  const conversation = session.getOrCreateConversation('welcome');
10  conversation.setParticipant(session.me);
11  return conversation;
12}, []);
13
14<Inbox
15  syncConversation={syncConversation}
16  style={{ width: 400, height: 600 }}
17  className="chat-container"
18/>;

To display a placeholder component while TalkJS is loading, pass a React node to the loadingComponent prop:

1import { Inbox } from '@talkjs/react';
2
3// ...
4
5<Inbox conversationId="welcome" loadingComponent={<h1>Loading..</h1>} />;

To reference an inbox outside the Inbox component, assign the underlying Talk.Inbox object to a ref:

1import { useRef, useCallback } from 'react';
2import { Inbox } from '@talkjs/react';
3
4const inbox = useRef<Talk.Inbox>();
5
6// ...
7
8const onSomeEvent = useCallback(async () => {
9  // do something with the inbox
10  if (inbox.current?.isAlive) {
11    inbox.current.sendLocation();
12  }
13}, []);
14
15<Inbox conversationId="welcome" inboxRef={inbox} />;

The ref will be set once the Talk.Inbox object has been created, and it will be set back to undefined once it has been destroyed.

Make sure you always check the isAlive property to ensure that the object is not destroyed because React is prone to trigger race conditions here (especially when React.StrictMode is enabled or when using a development setup with hot reloading, both of which cause a lot of destroying).

Respond to events (in this case, sending a message and triggering a custom message action) by printing details to the console:

1import { Inbox } from '@talkjs/react';
2
3// ...
4
5<Inbox
6  conversationId="welcome"
7  onSendMessage={(event) => console.log(event.message.text)}
8  onCustomMessageAction={(event) => console.log(event.action)}
9/>;

Customize the inbox with any options from Talk.InboxOptions. In this example, we filter out hidden conversations, remove the back button on mobile, and customize the message field placeholder text:

1<Inbox
2  // only show conversations where `custom.state != 'hidden'`
3  feedFilter={{ custom: { state: ['!=', 'hidden'] } }}
4  showMobileBackButton={false}
5  messageField={{ placeholder: 'Write a message..' }}
6  //...
7/>