Module @hiyve/utilities

@hiyve/utilities - Utility components and hooks for Hiyve

Remarks

This package provides utility components and hooks that are commonly needed in video conferencing applications. These utilities have zero or minimal external dependencies and can be used independently.

Key Components:

LiveClock: Self-contained live time display that updates every second
TooltipIconButton: IconButton wrapper that fixes tooltip behavior on disabled buttons

Key Hooks:

useContainerBreakpoint: Responsive container detection using ResizeObserver

Example

Basic LiveClock usage:

import { LiveClock } from '@hiyve/utilities';

function Header() {
  return (
    <header>
      <LiveClock variant="h6" />
    </header>
  );
}

Example

TooltipIconButton with disabled state:

import { TooltipIconButton } from '@hiyve/utilities';
import SaveIcon from '@mui/icons-material/Save';

function SaveButton({ hasChanges, onSave }) {
  return (
    <TooltipIconButton
      tooltip={hasChanges ? "Save changes" : "No changes to save"}
      disabled={!hasChanges}
      onClick={onSave}
    >
      <SaveIcon />
    </TooltipIconButton>
  );
}

Example

Responsive container with useContainerBreakpoint:

import { useContainerBreakpoint } from '@hiyve/utilities';

function ResponsivePanel() {
  const { isBelowBreakpoint, containerRef } = useContainerBreakpoint(600);

  return (
    <div ref={containerRef}>
      {isBelowBreakpoint ? <CompactView /> : <FullView />}
    </div>
  );
}

Example

Custom time format for LiveClock:

import { LiveClock, defaultLiveClockLabels } from '@hiyve/utilities';

function CustomClock() {
  return (
    <LiveClock
      labels={{
        ...defaultLiveClockLabels,
        formatTime: (date) => date.format('HH:mm:ss'),
      }}
    />
  );
}