React Chat Component TR

A fully customizable and socket-enabled React chat component with emoji support, message delivery statuses, typing indicators, and theming.

✨ Features

• 💬 Real-time chat interface using socket.io
• 🎨 Customizable theming
• 📦 Message delivery status (sending, sent, delivered, error)
• 🌐 Typing indicator
• 😀 Emoji support
• 🌓 Dark/light mode toggle
• 📱 Responsive design
• ⚡ Built-in TypeScript support
• 🔌 Easily integrates with any socket backend

---

📦 Installation

1npm install react-chat-component-tr
2# or
3yarn add react-chat-component-tr

---

🧩 Types

ChatMessage

1type ChatMessage = {
2  id: string;
3  senderId: string;
4  content: string;
5  timestamp: string | Date;
6  status?: 'sending' | 'sent' | 'delivered' | 'error';
7};

ChatTheme

1type ChatTheme = {
2  primaryColor?: string;
3  secondaryColor?: string;
4  backgroundColor?: string;
5  textColor?: string;
6  messageBubbleColor?: string;
7  ownMessageBubbleColor?: string;
8  ownMessageTextColor?: string;
9  timestampColor?: string;
10  statusColor?: string;
11};

---

🚀 Usage

1import { useState } from 'react';
2import io from 'socket.io-client';
3import {Chat, type ChatMessage} from 'react-chat-component-tr';
4
5const socket = io('http://localhost:3000'); // your socket backend URL
6
7const ChatComponent = () => {
8  const initialMessages: ChatMessage[] = [ { id: '1', senderId: 'user-456', content: 'Hello there!', timestamp: new Date() ,status:'sending' },
9  ]
10  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
11
12  return (
13    <Chat
14      userId="user123"
15      socket={socket}
16      messagesList={messages}
17      setMessagesList={setMessages}
18      showTypingIndicator={true}
19      showDeliveryStatus={true}
20      placeholder="Type your message..."
21    />
22  );
23};
24
25export default ChatComponent;

---

🧠 Props

Prop	Type	Required	Default	Description
userId	string	✅	—	The ID of the current user
socket	SocketIOClient.Socket	✅	—	Connected socket instance
messagesList	ChatMessage[]	✅	—	Current list of messages
setMessagesList	Dispatch<SetStateAction<ChatMessage[]>>	✅	—	State updater function for messages
onMessageSent	(message: ChatMessage) => void	❌	—	Callback after sending a message
initialMessages	ChatMessage[]	❌	[]	Initial messages (used only if messagesList is not set)
theme	ChatTheme	❌	default	Theme customization
placeholder	string	❌	"Type a message..."	Placeholder text for input
disabled	boolean	❌	false	Disable input field
showTypingIndicator	boolean	❌	true	Show typing indicator
showDeliveryStatus	boolean	❌	true	Show message delivery status

---

📡 Socket Events

Make sure your backend socket emits and listens to the following events:

Emitted by Frontend

• 'message': Sends a new message
• 'typing': Notifies that the user is typing

Listened by Frontend

• 'message': Receives new incoming messages
• 'typing': Receives typing indicator updates
• 'messageStatusUpdate': Receives message status changes (sent, delivered, etc.)

---

🎨 Theming Example

1const theme = {
2  primaryColor: '#1976d2',
3  secondaryColor: '#dc004e',
4  backgroundColor: '#ffffff',
5  textColor: '#000000',
6  messageBubbleColor: '#e0e0e0',
7  ownMessageBubbleColor: '#1976d2',
8  ownMessageTextColor: '#ffffff',
9  timestampColor: '#888888',
10  statusColor: '#4caf50'
11};

---

🌓 Mode Switch

A built-in toggle (<ModeSwitch />) is included in the UI to demonstrate dark/light themes if you wrap your app in a compatible theme context.

---

📜 License

MIT — free to use, modify, and distribute.

---

🙌 Contributing

PRs and issues are welcome. Let's build an awesome chat system together!

---

📬 Example Socket.io Server (Node.js)

1import { Server } from 'socket.io';
2
3const io = new Server(3000, {
4  cors: {
5    origin: '*',
6  },
7});
8
9io.on('connection', (socket) => {
10  socket.on('message', (msg, ack) => {
11    // simulate status change to 'delivered'
12    setTimeout(() => {
13      io.emit('messageStatusUpdate', { id: msg.id, status: 'delivered' });
14    }, 1000);
15
16    io.emit('message', msg);
17    ack?.();
18  });
19
20  socket.on('typing', ({ senderId }) => {
21    socket.broadcast.emit('typing', { senderId });
22  });
23});