React Chat

A modern, customizable React chat component library that provides a complete chat interface with support for messages, sidebars, and custom styling.

Requirements

• React 18 or higher
• Styled Components 6 or higher
• React Markdown 9 or higher
• React Syntax Highlighter 15 or higher

Installation

npm install react-chat
# or
yarn add react-chat
# or
pnpm add react-chat

Basic Usage

Step 1: Import the Components

import { Chat, Messages, MessageInput, Sidebar } from 'react-chat';

Step 2: Attach the Messages Component

const MyChat = () => (
  <Chat>
    <Messages />
  </Chat>
);

Step 3: Attach the MessageInput Component

const MyChat = () => (
  <Chat>
    <Messages />
    <MessageInput />
  </Chat>
);

Step 4: Attach the Sidebar Component

const MyChat = () => (
  <Chat>
    <Sidebar />
    <Messages />
    <MessageInput />
  </Chat>
);

Advanced Examples

Using Chat with Sidebar and Toggle

const ChatWithToggle = () => (
  <Chat>
    <Sidebar withToggle={true} />
    <Messages />
    <MessageInput />
  </Chat>
);

Using Chat with Sidebar (No Toggle)

const ChatWithoutToggle = () => (
  <Chat>
    <Sidebar withToggle={false} />
    <Messages />
    <MessageInput />
  </Chat>
);

Using Chat without Sidebar

const BasicChat = () => (
  <Chat>
    <Messages />
    <MessageInput />
  </Chat>
);

Using Chat with Custom Icons

const CustomIconChat = () => (
  <Chat
    assistantIcon={<img src="/custom-assistant-icon.png" alt="Assistant" />}
  >
    <Sidebar />
    <Messages />
    <MessageInput />
  </Chat>
);