React chat UI

React chat UI you can use right away

Discover a pre-built chat UI for React that supports three different highly customizable layouts. Mix and match layouts to suit your needs.

Try for free Contact sales

import Talk from 'talkjs';
import { useCallback } from 'react';

function Chat() {
  const syncUser = useCallback(
    () =>
      new Talk.User({
        id: 'nina',
        name: 'Nina',
        email: 'nina@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
        welcomeMessage: 'Hi!',
      }),
    []
  );

  return (
    <Session appId="tPKdyezd" syncUser={syncUser}>
      // UI component will go here...
    </Session>
  );
}

export default Chat;

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?

6m ago

I think so, yes.

5m ago

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

2m ago

typing...

just now

Write a reply...

Hey, I’m having trouble accessing my account. It says my password is incorrect.

5m ago

Hi there! No problem — let’s get that sorted. Have you tried resetting your password using the 'Forgot password?' link?

4m ago

Yes, but I haven’t received the reset email yet.

3m ago

Thanks for confirming. I’ve just sent a new reset link to your email. Please check your inbox and spam folder.

2m ago

Is there anything else I can help you with?

just now

Got it — checking my inbox now!

Inbox

The TalkJS Inbox for React shows the chat history on the left, selected conversation on the right. It's designed to act as the messaging center of your app, usually living on its own page.

Read the Inbox docs

Chatbox

The React Chatbox is just the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.

Read the Chatbox docs

Popup

You can also show a conversation in a React popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.

Read the Popup docs

Easily integrate a chat UI into your React app

You just need to tell us which conversation to display, who's chatting, and where to show it on the page. We take care of the rest! And if you want a deeper integration, we have all the APIs you'll need to add functionality or integrate into your own systems.

Getting started guide

import { Session, Chatbox } from "@talkjs/react";

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

.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: #3B82F6;
  background-color: #3B82F6; 
  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!

Tune the look and feel of your UI

You can customize the chat UI with HTML and CSS to exactly meet your needs. With TalkJS Themes you have complete control over the styling, layout, and document structure of the chat messages. You can even show metadata.

Explore our themes

React chat UI you can use right away

Easily integrate a chat UI into your React app

Tune the look and feel of your UI

Ready to get started?

Let's talk