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

npm install react-chat-component-tr
# or
yarn add react-chat-component-tr

🧩 Types

ChatMessage

type ChatMessage = {
  id: string;
  senderId: string;
  content: string;
  timestamp: string | Date;
  status?: 'sending' | 'sent' | 'delivered' | 'error';
};

ChatTheme

type ChatTheme = {
  primaryColor?: string;
  secondaryColor?: string;
  backgroundColor?: string;
  textColor?: string;
  messageBubbleColor?: string;
  ownMessageBubbleColor?: string;
  ownMessageTextColor?: string;
  timestampColor?: string;
  statusColor?: string;
};

🚀 Usage

import { useState } from 'react';
import io from 'socket.io-client';
import {Chat, type ChatMessage} from 'react-chat-component-tr';

const socket = io('http://localhost:3000'); // your socket backend URL

const ChatComponent = () => {
  const initialMessages: ChatMessage[] = [ { id: '1', senderId: 'user-456', content: 'Hello there!', timestamp: new Date() ,status:'sending' },
  ]
  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);

  return (
    <Chat
      userId="user123"
      socket={socket}
      messagesList={messages}
      setMessagesList={setMessages}
      showTypingIndicator={true}
      showDeliveryStatus={true}
      placeholder="Type your message..."
    />
  );
};

export 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

const theme = {
  primaryColor: '#1976d2',
  secondaryColor: '#dc004e',
  backgroundColor: '#ffffff',
  textColor: '#000000',
  messageBubbleColor: '#e0e0e0',
  ownMessageBubbleColor: '#1976d2',
  ownMessageTextColor: '#ffffff',
  timestampColor: '#888888',
  statusColor: '#4caf50'
};

🌓 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)

import { Server } from 'socket.io';

const io = new Server(3000, {
  cors: {
    origin: '*',
  },
});

io.on('connection', (socket) => {
  socket.on('message', (msg, ack) => {
    // simulate status change to 'delivered'
    setTimeout(() => {
      io.emit('messageStatusUpdate', { id: msg.id, status: 'delivered' });
    }, 1000);

    io.emit('message', msg);
    ack?.();
  });

  socket.on('typing', ({ senderId }) => {
    socket.broadcast.emit('typing', { senderId });
  });
});