Welcome to ReChat - Enterprise-grade chat infrastructure for modern React applications.
Get up and running with ReChat in minutes:
npm install @rechat-sdk/react
Add chat functionality to your React application with just a few lines of code:
1import { ChatProvider, ChannelList, Messages, MessageInput } from '@rechat-sdk/react'23function App() {4 return (5 <ChatProvider6 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}
The ChatProvider component initializes the chat client and manages the WebSocket connection. It provides the chat context to all child components.
1import { ChatProvider } from '@rechat-sdk/react'23<ChatProvider4 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: false13 }}14>15 {/* Your chat components */}16</ChatProvider>
apiKey
: Your ReChat API keyappId
: Your application IDchannelName
: The name of the channel to connect touserId
: The current user's IDuserName
: The current user's display nameThe Messages component displays the message history and real-time messages for the current channel. It handles message rendering, auto-scrolling, and loading states.
1import { Messages } from '@rechat-sdk/react'23<Messages4 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/>
className
: CSS class for the outer containercontainerClassName
: CSS class for the messages wrappermessageClassName
: CSS class for individual messagesrenderMessage
: Custom message render functionThe ChannelList component displays available channels and handles channel selection.
1import { ChannelList } from '@rechat-sdk/react'23<ChannelList4 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/>
limit
: Maximum number of channels to displayonChatSelect
: Callback when a channel is selectedcustomStyles
: Custom styling classesrenderItem
: Custom channel render functionProvides an input field for sending messages in the current channel.
1import { MessageInput } from '@rechat-sdk/react'23<MessageInput4 placeholder="Type a message..."5 onSend={(message) => console.log('Sent:', message)}6 maxLength={1000}7 disabled={false}8/>
placeholder
: Input placeholder textonSend
: Callback when a message is sentmaxLength
: Maximum message lengthdisabled
: Disable the inputThe useChat hook provides access to the chat state and functionality. It returns messages, channels, user information, and WebSocket connection details.
1import { useChat } from '@rechat-sdk/react'23function 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 ws10 } = useChat()1112 // Access real-time chat state and functionality13}
messages
: Message data and loading statechannels
: Available channels and loading statecurrentUser
: Current user informationactiveChannel
: Currently active channelws
: WebSocket instance for advanced usageReChat includes built-in TypeScript definitions for all components and hooks:
ChatListProps
: Props for ChannelList componentMessageInputProps
: Props for MessageInput componentMessagesProps
: Props for Messages componentChannelResponseDto
: Channel data structureMessageResponseDto
: Message data structure