ReChat Documentation

Welcome to ReChat - Enterprise-grade chat infrastructure for modern React applications.

Quick Start

Get up and running with ReChat in minutes:

Terminalbash

npm install @rechat-sdk/react

Add chat functionality to your React application with just a few lines of code:

App.tsxjsx

1import { ChatProvider, ChannelList, Messages, MessageInput } from '@rechat-sdk/react'
2
3function App() {
4  return (
5    <ChatProvider 
6      apiKey="your_api_key"
7      appId="your_app_id"
8      channelName="general"
9      userId="user_123"
10      userName="John Doe"
11    >
12      <div className="flex h-screen">
13        <ChannelList />
14        <div className="flex-1 flex flex-col">
15          <Messages />
16          <MessageInput />
17        </div>
18      </div>
19    </ChatProvider>
20  )
21}

ChatProvider

The ChatProvider component initializes the chat client and manages the WebSocket connection. It provides the chat context to all child components.

ChatProvider.tsxjsx

1import { ChatProvider } from '@rechat-sdk/react'
2
3<ChatProvider 
4  apiKey="your_api_key"
5  appId="your_app_id"
6  channelName="general"
7  userId="user_123"
8  userName="John Doe"
9  options={{
10    reconnectInterval: 3000,
11    maxReconnectAttempts: 5,
12    debug: false
13  }}
14>
15  {/* Your chat components */}
16</ChatProvider>

Required Props

apiKey: Your ReChat API key
appId: Your application ID
channelName: The name of the channel to connect to
userId: The current user's ID
userName: The current user's display name

Messages

The Messages component displays the message history and real-time messages for the current channel. It handles message rendering, auto-scrolling, and loading states.

Messages.tsxjsx

1import { Messages } from '@rechat-sdk/react'
2
3<Messages 
4  className="flex-1 overflow-y-auto"
5  containerClassName="p-4 space-y-4"
6  messageClassName="max-w-[70%]"
7  renderMessage={(message) => (
8    <div className="message-custom">
9      <p>{message.content}</p>
10      <span>{message.participant_id}</span>
11    </div>
12  )}
13/>

Customization Props

className: CSS class for the outer container
containerClassName: CSS class for the messages wrapper
messageClassName: CSS class for individual messages
renderMessage: Custom message render function

ChannelList

The ChannelList component displays available channels and handles channel selection.

ChannelList.tsxjsx

1import { ChannelList } from '@rechat-sdk/react'
2
3<ChannelList 
4  limit={50}
5  onChatSelect={(channel) => console.log('Selected:', channel)}
6  customStyles={{
7    container: 'border-r h-full w-64',
8    chatItem: 'p-4 hover:bg-gray-100'
9  }}
10  renderItem={(channel) => (
11    <div>
12      <h3>{channel.name}</h3>
13    </div>
14  )}
15/>

Available Props

limit: Maximum number of channels to display
onChatSelect: Callback when a channel is selected
customStyles: Custom styling classes
renderItem: Custom channel render function

MessageInput

Provides an input field for sending messages in the current channel.

MessageInput.tsxjsx

1import { MessageInput } from '@rechat-sdk/react'
2
3<MessageInput 
4  placeholder="Type a message..."
5  onSend={(message) => console.log('Sent:', message)}
6  maxLength={1000}
7  disabled={false}
8/>

Available Props

placeholder: Input placeholder text
onSend: Callback when a message is sent
maxLength: Maximum message length
disabled: Disable the input

useChat Hook

The useChat hook provides access to the chat state and functionality. It returns messages, channels, user information, and WebSocket connection details.

CustomComponent.tsxjsx

1import { useChat } from '@rechat-sdk/react'
2
3function CustomChat() {
4  const { 
5    messages: { data: messages, isLoading, error, refetch },
6    channels: { data: channels },
7    currentUser: { id, userName, isConnected },
8    activeChannel: { name, id: channelId },
9    ws
10  } = useChat()
11  
12  // Access real-time chat state and functionality
13}

Hook Return Values

messages: Message data and loading state
channels: Available channels and loading state
currentUser: Current user information
activeChannel: Currently active channel
ws: WebSocket instance for advanced usage

TypeScript Support

ReChat includes built-in TypeScript definitions for all components and hooks:

Available Types

ChatListProps: Props for ChannelList component
MessageInputProps: Props for MessageInput component
MessagesProps: Props for Messages component
ChannelResponseDto: Channel data structure
MessageResponseDto: Message data structure

Need Help?

Our support team is here to help you build amazing chat experiences.

Contact Support