React

Build chat into your React app with TalkJS

Q: Can I customize the TalkJS React chat components?

Yes. Start with component props and events, such as baseTheme to switch between the default and classic themes. You can also override the default styles with CSS, replace a single theme component such as the message list header, or build a custom theme from the TalkJS theme source, which comes in JavaScript and TypeScript versions. See Customization for when to use each approach.

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 { getTalkSession } 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 agents could handle common queries.

Filip

2m ago

00:15

Say something...

React SDK

Connect users with a fully customizable chat using TalkJS's 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 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.

More on React: chat UI layouts, the customizable chat component, the embeddable chat widget, an AI chatbot, and an AI agent. Using Next.js? See the Next.js chat app page.

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.

FAQs

The TalkJS React chat SDK is a set of pre-built, customizable React components for in-app chat and messaging, published as the @talkjs/react-components npm package. It includes Chatbox, ConversationList, and Inbox components for 1-on-1, group, and AI chat, and works alongside the JavaScript Data API (@talkjs/core) for syncing users and conversations. TalkJS hosts the real-time backend and sends email, SMS, and browser notifications to users who miss a message.

It depends on whether you need only chat UI or also a hosted messaging backend. UI-only libraries give you chat screens but leave real-time delivery, storage, and notifications to you. Hosted SDKs such as TalkJS, Stream, Sendbird, and CometChat ship React chat components connected to their own backend. TalkJS lets you change its components with props, CSS, or your own theme components, and offers a headless JavaScript Data API when you want to build the UI yourself. Development mode is free with every feature, so you can try it in your app before you decide.

A React chat SDK gives you ready-made components that render the chat, while a chat API gives you the messaging data and leaves the UI to you. TalkJS offers both. Use the React components for pre-built chat UI, the JavaScript Data API to read, subscribe to, and update conversations and messages from your own components, and the REST API and webhooks for server-side tasks such as syncing users.

Install the packages, render a component, and point it at a user and a conversation. Run npm install @talkjs/react-components @talkjs/core, import Chatbox and the default.css stylesheet, then render the Chatbox with your appId, a userId, and a conversationId. The React getting started guide also covers creating users and conversations, and enabling authentication before you go live.

Yes. Start with component props and events, such as baseTheme to switch between the default and classic themes. You can also override the default styles with CSS, replace a single theme component such as the message list header, or build a custom theme from the TalkJS theme source, which comes in JavaScript and TypeScript versions. See Customization for when to use each approach.

Yes. Next.js apps use the same React components and JavaScript Data API. The Next.js getting started guide shows how to add a chatbox and create users and conversations, and the Next.js chat page gives an overview.

Yes, through webhooks and the REST API. A webhook tells your server when a user sends a message, your server calls the AI model you choose, and the REST API posts the reply into the conversation, where your React components show it like any other message. TalkJS doesn't include a built-in AI agent, so you stay in control of the model and its logic. See AI agent interface.

TalkJS is free in development mode with full feature access. You only need a paid plan once you go live with real users. See Pricing for details.

Build chat into your React app with TalkJS

Working with React and TalkJS

Ready-made chat components you can customize

FAQs

Ready to get started?

Let’s talk