Skip to main content

useTimeZone

This hook returns the device's timezone setting. It is useful for displaying dates and times in the user's local timezone.

Import​

import { useTimeZone } from "~lib/use-time-zone";

API​

const timeZone = useTimeZone();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
timeZonestringAn IANA timezone identifier (e.g., "America/New_York", "Europe/London")

Example​

import { useScheduledDate } from "~lib/use-scheduled-date";
import { useTimeZone } from "~lib/use-time-zone";

const Widget = () => {
  const timeZone = useTimeZone();
  const scheduledDate = useScheduledDate();

  const time = scheduledDate.toLocaleTimeString(undefined, {
    timeZone,
    hour: "2-digit",
    minute: "2-digit",
  });

  const date = scheduledDate.toLocaleDateString(undefined, {
    timeZone,
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <div>
      <h1>{time}</h1>
      <p>{date}</p>
      <small>Timezone: {timeZone}</small>
    </div>
  );
};

This hook says how to format a moment, not which moment to format. The clock gives the moment the frame goes on display, so new Date() and useScheduledDate both pair with it.

See Also​