React

Build chat into your React app with TalkJS

Quickly embed a customizable chat experience into your React app using the best chat APIs, feature-rich SDKs, and highly customizable components.

Try for free Contact sales

import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { TalkSession } from '@talkjs/core';
import { useEffect } from 'react';

function Chat() {
  const appId = '<APP_ID>';
  const userId = 'frank';
  const otherUserId = 'nina';
  const conversationId = 'new_conversation';
  const session = getTalkSession({ appId, userId });

  useEffect(() => {
    session.currentUser.createIfNotExists({ name: 'Frank' });
    session.user(otherUserId).createIfNotExists({ name: 'Nina' });

    const conversation = session.conversation(conversationId);
    conversation.createIfNotExists();
    conversation.participant(otherUserId).createIfNotExists();
  }, [session, conversationId, otherUserId]);

  return (
    <div style={{ width: '400px', height: '800px' }}>
      <Chatbox
        appId={appId}
        userId={userId}
        conversationId={conversationId}
      />
    </div>
  );
}

Hey, I'm trying to lift state up from a child component, but I'm getting undefined errors. Any ideas?

8m ago

Are you passing the state and the setState function correctly as props?

10m ago

I think so, yes.

7m ago

Maybe you're not binding the handler in the constructor. That might be the issue.

2m ago

Say something...

AI integration strategy

Andrea, Robert, Nikki, Filip

Andrea

10m ago

Hey team, how do you think we can integrate AI into our project?

Robert

8m ago

Maybe we can use AI for data analysis. It can help us find trends faster.

Nikki

7m ago

Good idea @Robert. What about automating customer support? AI chatbots could handle common queries.

Filip

2m ago

00:15

Say something...

React SDK

Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with React.

Drop-in chat UI

Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.

Fully-featured

All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.

Working with React and TalkJS

Ship faster, simplify your stack, and save on development costs by using the best chat APIs and a feature-rich React chat SDK. It's all you need to add a fully-featured chat into your app in minutes, instead of months.

React SDK documentation

<Session appId="t824ba8" userId="pete">
  <Chatbox conversation="workshop" className="chatbox" />
</Session>

Because implementing TalkJS was as fast and easy as it was, we were able to greenlight and move this project along very quickly. Had we not chosen this path, the feature would have either been delayed, or shelved due to the resources needed to implement it.

Sean Elliot

Engineering Manager, Styleseat

.message {
  white-space: normal;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  word-wrap: break-word;
  position: relative;
  display: inline-block;
  max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
  border-color: #F2F2F2;
  background-color: #F2F2F2;
  color: #171717;
}

.has-avatar-spacer .message {
  max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}

.by-me .message {
  border-color: #EC4899;
  background-color: #EC4899; 
  color: #fff;
  margin-right: 0.50rem;
}

Hey, have you heard about these micro communities people are joining?

8m ago

Yeah, I have! They seem like a great alternative to big social media platforms.

7m ago

Definitely. I joined one for local gardening enthusiasts. It's so much more engaging.

6m ago

That's cool. I've been looking to cut down my social media time. How do you like it?

2m ago

I love it. More meaningful interactions.

just now

I'll start looking into it!

Ready-made chat components you can customize

The React SDK comes with UI components that are forward-compatible and will keep working on future devices and new features. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.

Build chat into your React app with TalkJS

Working with React and TalkJS

Ready-made chat components you can customize

Ready to get started?

Let's talk