Use typing indicator

Send and receive typing indicator events in a conversation

Overview

Manages the typing indicator for a conversation. Returns the list of user IDs currently typing (for rendering a “Someone is typing…” indicator) and startTyping/stopTyping functions that emit the appropriate socket events.

Requires ChatProvider in the component tree.

Usage Example

import { useTypingIndicator } from "@sublay/react-js";

function MessageInput({ conversationId }: { conversationId: string }) {
  const { typingUsers, startTyping, stopTyping } = useTypingIndicator({
    conversationId,
  });
  const [text, setText] = useState("");

  return (
    <div>
      {typingUsers.length > 0 && (
        <p className="text-sm text-gray-500">
          {typingUsers.length === 1
            ? "Someone is typing..."
            : `${typingUsers.length} people are typing...`}
        </p>
      )}
      <input
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          startTyping();
        }}
        onBlur={stopTyping}
      />
    </div>
  );
}

Props

conversationId · string · required

The ID of the conversation to track typing state for.

Returns

typingUsers · string[]

Array of user IDs currently typing in this conversation. The current user is always excluded.

startTyping · () => void

Emits a typing:start event to the server. Throttled internally — safe to call on every keystroke. Re-emits the keep-alive every 2 seconds while typing continues.

stopTyping · () => void

Emits a typing:stop event to the server and cancels the keep-alive interval. Call on message send, input clear, or blur.

Notes

• startTyping() is idempotent while already typing — calling it repeatedly does not emit duplicate events; only the keep-alive timer re-emits every 2 seconds.
• On unmount, if the user was typing, typing:stop is emitted automatically to prevent a stale indicator on recipients’ screens.
• Each typing user is auto-removed from typingUsers after 5 seconds of no keep-alive (handled by ChatProvider).
• For integration guidance, see Chat: Real-time.