@shuhaib-enfin/chat

React frontend SDK for chat platform — components, hooks, and context provider.

Install

npm install @shuhaib-enfin/chat react react-dom socket.io-client

Quick Start

1. Wrap Your App with ChatProvider

import { ChatProvider } from '@shuhaib-enfin/chat';
import Chat from '@shuhaib-enfin/chat';

function App() {
  return (
    <ChatProvider
      config={{ apiKey: 'chat_xxx' }}
      userId="user_123"
      userName="Alice"
      serverUrl="http://localhost:3002"
    >
      <Chat />
    </ChatProvider>
  );
}

Pass serverUrl as your chat-server URL. It connects to ${serverUrl}/chat namespace and calls REST at ${serverUrl}/api/*.

ChatProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | config | ChatConfig | Yes | { apiKey: string } | | userId | string | Yes | Unique user ID | | userName | string | Yes | Display name | | serverUrl | string | Yes | Your chat-server URL |

ChatConfig

interface ChatConfig {
  apiKey: string;
  validationUrl?: string;  // optional custom validation endpoint
  ringtoneUrl?: string;    // optional override for the incoming-call ringtone
}

ringtoneUrl — custom incoming-call ringtone

By default the SDK plays a bundled i_phone_message.mp3 whenever an audio call comes in. Pass ringtoneUrl to override it with your own file. Works with absolute URLs or any path the consumer's bundler/dev server can resolve.

<ChatProvider
  config={{
    apiKey: 'chat_xxx',
    ringtoneUrl: '/sounds/my-ring.mp3',   // served by your app
  }}
  userId="user_123"
  userName="Alice"
  serverUrl="http://localhost:3002"
>

• Anything that HTML5 <audio> accepts works: /sounds/ring.mp3, https://cdn.example.com/ring.ogg, or a Vite/Webpack import resolved URL.
• If the override URL fails to load, the browser console logs [RINGTONE] play() rejected: ... and the call UI keeps working.
• The default mp3 is bundled at dist/public/music/i_phone_message.mp3 and shipped with the package — no extra setup needed.

Default Chat Component

The <Chat /> component provides full UI:

• User registration/login
• Room list (direct and group)
• Real-time messaging
• File uploads with drag-and-drop
• Typing indicators
• Online presence (green dot)
• Audio calls (WebRTC)

Customize Appearance

Styles are in styles.css. Override CSS variables:

:root {
  --chat-primary: #007bff;
  --chat-bg: #ffffff;
  --chat-text: #333333;
  --chat-border: #e0e0e0;
  --chat-radius: 8px;
  --chat-font: system-ui, sans-serif;
}

Build Custom UI

Use hooks instead of <Chat />:

import { useChatContext, useRooms, useMessages, useCall, useSocket } from '@shuhaib-enfin/chat';
import { ChatProvider } from '@shuhaib-enfin/chat';

function CustomChat() {
  const { userId, messages, rooms, currentRoom, sendMessage, selectRoom } = useChatContext();
  const { activeCall, startCall, endCall, acceptCall } = useCall();

  // Send message
  await sendMessage(currentRoom._id, 'Hello!');

  // Start call
  await startCall(currentRoom._id, 'participant_456');
}

useChatContext

Returns everything:

interface ChatContextValue {
  userId: string;
  userName: string;
  messages: Message[];
  rooms: Room[];
  users: ChatUser[];
  currentRoom?: Room;
  activeCall?: AudioCall;
  typingUsers: PresenceStatus[];
  connected: boolean;
  loading: boolean;
  error?: string;
  sendMessage: (roomId, content, file?) => Promise<void>;
  selectRoom: (roomId) => void;
  createRoom: (name, type, members) => Promise<Room>;
  startCall: (roomId, participantId) => Promise<void>;
  endCall: () => Promise<void>;
  acceptCall: () => Promise<void>;
  mute: () => void;
  unmute: () => void;
  isMuted: boolean;
  socket?: Socket;
  refreshUsers: () => Promise<void>;
}

useRooms

const { rooms, loading, error, createRoom, openDirectRoom } = useRooms();

useMessages

const { messages, loading, sendMessage, markRead } = useMessages(roomId);

useCall

const { activeCall, startCall, endCall, acceptCall, mute, unmute, isMuted } = useCall();

useSocket

Raw Socket.IO access:

const socket = useSocket();
// socket.emit('message', { roomId, content });
// socket.on('message', (msg) => { ... });

Types

All types are exported:

import { Message, Room, User, ChatConfig } from '@shuhaib-enfin/chat';

Environment Variables

Vite

VITE_CHAT_API_KEY=chat_xxx
VITE_SERVER_URL=http://localhost:3002

CRA

REACT_APP_CHAT_API_KEY=chat_xxx
REACT_APP_SERVER_URL=http://localhost:3002

Next.js

In .env.local:

NEXT_PUBLIC_CHAT_API_KEY=chat_xxx
NEXT_PUBLIC_SERVER_URL=http://localhost:3002

Then access via process.env.NEXT_PUBLIC_*.

Server Requirement

Your backend must run @shuhaib-enfin/chat-server. The frontend SDK communicates with it via:

• Socket.IO: ${serverUrl}/chat
• REST: ${serverUrl}/api/*

For backend server, see @shuhaib-enfin/chat-server.