MCS-Shared

Shared React components, hooks, and utilities for building real-time chat applications with Socket.io.

Installation

npm install mcs-shared

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @tanstack/react-virtual react-i18next socket.io-client

Features

Components

• ChatMessage - Message bubble with text, images, and file attachments
• ProgressiveImage - Lazy-loaded images with blur-up effect
• EmojiPicker - Emoji selection UI
• TypingIndicator - Animated "user is typing..." indicator
• UnreadIndicator - Badge showing unread message count
• ScrollToBottomButton - Auto-scroll button for chat
• FullImageModal - Full-screen image viewer
• ErrorBoundary - React error boundary
• Button - Reusable button component
• SafeText - XSS-safe text rendering
• HighlightedText - Text with search term highlighting
• ImageSkeleton - Loading placeholder for images
• MessageSearchBar - Search messages UI

Hooks

• useSocket - Socket.io connection management with auto-reconnect
• usePresence - Track online/offline user status
• useRateLimit - Client-side rate limiting
• useTypingIndicator - Typing indicator with auto-stop
• useMessageGrouping - Group consecutive messages by sender

Utilities

• compressImage - Client-side image compression
• sanitizeUsername - XSS prevention for usernames
• groupMessages - Group messages for display
• highlightText - Highlight search terms in text
• emojiDetection - Detect emoji-only messages

TypeScript Types

Comprehensive TypeScript types for:

• User, Organization, ChatRoom, Message
• Authentication responses
• API responses
• Message status

Usage Examples

Socket Connection

import { useSocket } from 'mcs-shared';

function ChatApp() {
  const { socket, connected, emit, on, off } = useSocket({
    url: 'https://api.example.com',
    autoConnect: true
  });

  useEffect(() => {
    if (!connected) return;

    const handleMessage = (message) => {
      console.log('New message:', message);
    };

    on('message:new', handleMessage);
    return () => off('message:new', handleMessage);
  }, [connected, on, off]);

  const sendMessage = (content) => {
    emit('message:send', { content });
  };

  return <div>Connected: {connected ? 'Yes' : 'No'}</div>;
}

Chat Message

import { ChatMessage } from 'mcs-shared';

function MessageList({ messages, currentUser }) {
  return (
    <div>
      {messages.map(message => (
        <ChatMessage
          key={message._id}
          message={message}
          isCurrentUser={message.sender._id === currentUser._id}
        />
      ))}
    </div>
  );
}

Progressive Image

import { ProgressiveImage } from 'mcs-shared';

function ImageGallery({ images }) {
  return (
    <div>
      {images.map(image => (
        <ProgressiveImage
          key={image.id}
          src={image.url}
          alt={image.description}
          thumbnailSrc={image.thumbnail}
        />
      ))}
    </div>
  );
}

Rate Limiting

import { useRateLimit } from 'mcs-shared';

function ChatInput() {
  const { checkLimit, getRemainingTime } = useRateLimit({
    maxAttempts: 3,
    windowMs: 5000
  });

  const handleSend = () => {
    if (!checkLimit('sendMessage')) {
      const remaining = getRemainingTime('sendMessage');
      alert(`Rate limit exceeded. Try again in ${remaining}ms`);
      return;
    }

    // Send message...
  };

  return <button onClick={handleSend}>Send</button>;
}

Presence Tracking

import { usePresence } from 'mcs-shared';

function UserList({ users }) {
  const { isUserOnline } = usePresence(socket);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {isUserOnline(user.id) ? 'Online' : 'Offline'}
        </li>
      ))}
    </ul>
  );
}

Security Features

• XSS Prevention: All text inputs are sanitized
• Safe HTML Rendering: Links are detected and rendered safely
• Input Validation: Built-in validation utilities
• Rate Limiting: Client-side rate limiting to prevent abuse

Performance Optimizations

• Lazy Loading: Images load on-demand with Intersection Observer
• Progressive Enhancement: Blur-up image loading effect
• Message Grouping: Reduces DOM nodes by grouping consecutive messages
• Memoization: Components use React.memo for optimal re-renders

Contributing

Part of the MCS (Multi-Client System) project. Contributions welcome!

License

MIT License - see LICENSE file for details

Credits

Built for the MCS real-time chat application platform.