useTimeZone

Access and monitor the user's time zone information including UTC offset, abbreviation, and DST status. Perfect for international applications and time-sensitive features.

Interactive Demo

Time Zone

UTC

UTC Offset

+0:00

Abbreviation

UTC

Daylight Saving Time

Yes

Implementation

interface TimeZoneInfo {
  timeZone: string;
  offset: number;
  abbreviation: string;
  isDST: boolean;
}

export function useTimeZone(): TimeZoneInfo {
  const [timeZoneInfo, setTimeZoneInfo] = useState<TimeZoneInfo>(() => {
    const date = new Date();
    return {
      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      offset: -date.getTimezoneOffset() / 60,
      abbreviation: date.toLocaleTimeString("en-us", { timeZoneName: "short" }).split(" ")[2],
      isDST: isDaylightSavingTime(date),
    };
  });

  useEffect(() => {
    // Update time zone info every minute to catch DST changes
    const interval = setInterval(() => {
      const date = new Date();
      setTimeZoneInfo({
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        offset: -date.getTimezoneOffset() / 60,
        abbreviation: date.toLocaleTimeString("en-us", { timeZoneName: "short" }).split(" ")[2],
        isDST: isDaylightSavingTime(date),
      });
    }, 60000);

    return () => clearInterval(interval);
  }, []);

  return timeZoneInfo;
}

function isDaylightSavingTime(date: Date): boolean {
  const jan = new Date(date.getFullYear(), 0, 1);
  const jul = new Date(date.getFullYear(), 6, 1);
  return Math.max(-jan.getTimezoneOffset(), -jul.getTimezoneOffset()) === -date.getTimezoneOffset();
}

Usage Examples

import { useTimeZone } from '@/components/hooks/useTimeZone';

function TimeZoneDisplay() {
  const { timeZone, offset, abbreviation, isDST } = useTimeZone();
  
  return (
    <div>
      <p>Current Time Zone: {timeZone}</p>
      <p>UTC Offset: {offset}:00</p>
      <p>Abbreviation: {abbreviation}</p>
      <p>Daylight Saving Time: {isDST ? 'Yes' : 'No'}</p>
    </div>
  );
}

Documentation

Key Features

  • Real-time time zone information updates
  • Automatic DST detection
  • Time zone abbreviation support
  • UTC offset calculation
  • TypeScript support with proper typing
  • SSR compatible

Common Use Cases

  • Displaying local time information
  • Time zone aware applications
  • Scheduling and calendar applications
  • International date/time handling
  • Time conversion utilities

API Reference

useTimeZone(): TimeZoneInfo

Returns an object containing time zone information.

Return Value:

  • timeZone: String representing the IANA time zone name
  • offset: Number representing UTC offset in hours
  • abbreviation: String representing time zone abbreviation
  • isDST: Boolean indicating if DST is currently active

Browser Compatibility

The hook uses the Intl API and standard Date methods, which are supported in all modern browsers. For older browsers, consider using a polyfill for the Intl API.