Popup

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

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

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

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

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

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

1import { Popup } from '@talkjs/react';
2
3// ...
4
5<Popup
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 { Popup } 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<Popup
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 { Popup } from '@talkjs/react';
2
3// ...
4
5<Popup conversationId="welcome" loadingComponent={<h1>Loading..</h1>} />;

To reference a popup outside the Popup component, assign the underlying Talk.Popup object to a ref:

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

The ref will be set once the Talk.Popup 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 { Popup } from '@talkjs/react';
2
3// ...
4
5<Popup
6  conversationId="welcome"
7  onSendMessage={(event) => console.log(event.message.text)}
8  onCustomMessageAction={(event) => console.log(event.action)}
9/>;

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

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