@void-snippets/react

useCallTimer

Elapsed MM:SS timer from a Unix timestamp.

#What it does

Displays how long something has been running as a live "MM:SS" string. Updates every second. Cleans up its interval automatically when the component unmounts — no memory leaks.

#Signature

typescript
function useCallTimer(startedAt?: number | null): string

#Parameter

ParameterTypeDescription
startedAtnumber | null | undefinedUnix timestamp in milliseconds (Date.now()). Pass null to display "00:00".

#Output

Returns a string in "MM:SS" format: "00:00" → "00:01" → … → "04:23".

#Example

tsx
function CallBanner({ call }: { call: ActiveCall | null }) {
  const elapsed = useCallTimer(call?.startedAt ?? null);

  if (!call) return null;

  return (
    <div className="call-banner">
      <PhoneIcon className="pulse" />
      <div>
        <p>Active call — {call.contactName}</p>
        <p>{elapsed}</p>
      </div>
      <Button variant="destructive" onClick={() => endCall(call.id)}>End</Button>
    </div>
  );
}