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.