@multisystemsuite/timezone-engine-react

React hooks and components for timezone management, world clocks, and locale-aware dates.

What it is used for

• React / Next.js / Vite / microfrontend UIs
• Live world clocks on dashboards
• Timezone pickers for user or site settings
• Locale-aware date display in tables and forms
• Meeting scheduler UI across global teams

Install

npm install @multisystemsuite/timezone-engine-react

Peer dependencies: react >= 18, react-dom >= 18

Usage

import {
  TimezoneProvider,
  useTimezone,
  useWorldClock,
  useDateFormatter,
  useBusinessHours,
  useScheduler,
  WorldClock,
  TimezonePicker,
  RealtimeClock,
  BusinessHours,
  GlobalMeetingPlanner,
} from "@multisystemsuite/timezone-engine-react";

function App() {
  return (
    <TimezoneProvider defaultTimezone="UTC" defaultLocale="en-US">
      <Dashboard />
    </TimezoneProvider>
  );
}

function Dashboard() {
  const { timezone } = useTimezone();
  const { format } = useDateFormatter();
  const { isOpen } = useBusinessHours(timezone);
  const scheduler = useScheduler();

  return (
    <>
      <TimezonePicker />
      <RealtimeClock />
      <BusinessHours timezone={timezone} />
      <WorldClock timezones={["UTC", "Asia/Kolkata", "America/New_York"]} />
      <GlobalMeetingPlanner
        participantTimezones={["America/New_York", "Asia/Kolkata"]}
        durationMinutes={60}
      />
    </>
  );
}

Components & hooks

| Name | Type | Purpose | | ---------------------- | --------- | -------------------------------- | | TimezoneProvider | Context | App-wide timezone + locale state | | useTimezone | Hook | Detect and set timezone | | useWorldClock | Hook | Live multi-timezone clock data | | useDateFormatter | Hook | Locale-aware format() function | | WorldClock | Component | Multi-city clock display | | TimezonePicker | Component | IANA timezone <select> | | LiveClock | Component | Auto-updating time display | | DateFormatter | Component | Semantic <time> element | | useScheduler | Hook | Enterprise scheduling engine | | useRealtimeClock | Hook | SSR-safe live clock | | useBusinessHours | Hook | Regional open/closed checks | | useTimezoneAnalytics | Hook | Dashboard timezone aggregation | | RealtimeClock | Component | Alias for LiveClock | | BusinessHours | Component | Open/closed status display | | ShiftPlanner | Component | Active shifts list | | GlobalMeetingPlanner | Component | Cross-region meeting suggestions |

Styling

Optional shared styles:

import "@multisystemsuite/timezone-engine-ui/styles.css";

Related packages

• @multisystemsuite/timezone-engine-core — logic without React
• @multisystemsuite/timezone-engine-ui — CSS design tokens

Keywords

timezone, react, hooks, world-clock, ssr, nextjs, vite, typescript, components

License

MIT