Skip to main content
useConnectionManager is the recommended way to implement connection UIs. It loads the connection status with a specific user on mount and exposes named actions for every state transition: send, accept, decline, withdraw, and disconnect.

​
Usage Example

import { useConnectionManager } from "@replyke/react-js";

function ConnectionButton({ userId }: { userId: string }) {
  const {
    connectionStatus,
    isLoading,
    sendConnectionRequest,
    acceptConnectionRequest,
    declineConnectionRequest,
    withdrawConnectionRequest,
    disconnectUser,
  } = useConnectionManager({ userId });

  if (isLoading) return <button disabled>Loading...</button>;

  switch (connectionStatus) {
    case "none":
      return <button onClick={() => sendConnectionRequest()}>Connect</button>;
    case "pending-sent":
      return <button onClick={withdrawConnectionRequest}>Withdraw Request</button>;
    case "pending-received":
      return (
        <>
          <button onClick={acceptConnectionRequest}>Accept</button>
          <button onClick={declineConnectionRequest}>Decline</button>
        </>
      );
    case "connected":
      return <button onClick={disconnectUser}>Disconnect</button>;
    case "declined-sent":
      return <span>Request Declined</span>;
    case "declined-received":
      return <button onClick={() => sendConnectionRequest()}>Connect Again</button>;
  }
}

​
Parameters

​
userId
string
required
The ID of the user whose connection relationship to manage.

​
Returns

​
connectionStatus
ConnectionStatus
The current relationship state. One of: "none" | "pending-sent" | "pending-received" | "connected" | "declined-sent" | "declined-received".
​
connectionId
string | null
The ID of the active connection record, if one exists.
​
connectionData
object
Additional metadata about the connection.
​
isLoading
boolean
true while the initial status is being fetched.
​
sendConnectionRequest
(message?: string) => Promise<void>
Sends a connection request to the target user. Accepts an optional message string. Only active when status is "none" or "declined-received".
​
acceptConnectionRequest
() => Promise<void>
Accepts an incoming connection request. Only active when status is "pending-received".
​
declineConnectionRequest
() => Promise<void>
Declines an incoming connection request. Only active when status is "pending-received".
​
withdrawConnectionRequest
() => Promise<void>
Withdraws a pending outgoing request. Only active when status is "pending-sent".
​
disconnectUser
() => Promise<void>
Removes an established connection. Only active when status is "connected".
​
removeConnectionSmart
() => Promise<void>
Removes the connection regardless of current state (withdraw, decline, or disconnect) by user ID. Useful as a generic “remove” action when the exact state doesn’t matter.
​
refreshConnectionStatus
() => Promise<void>
Re-fetches the connection status from the server.
The current user must be signed in. The hook performs no action if userId matches the authenticated user’s own ID.