72Başlayın
HextaUI

useToday

Gece yarısı ve sekme geri geldiğinde güncellenen, hydration uyuşmazlığı oluşturmayan bugünün tarihi.

"use client"

import { Skeleton } from "@/components/ui/skeleton"
import { useToday } from "@/hooks/use-today"

const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: "full" })

function daysUntilNewYear(today: Date) {
  const next = new Date(today.getFullYear() + 1, 0, 1)
  return Math.round((next.getTime() - today.getTime()) / 86_400_000)
}

export function UseTodayDemo() {
  const today = useToday()

  return (
    <div className="flex flex-col items-center gap-1 text-center">
      {today ? (
        <>
          <p className="text-lg font-medium">{formatter.format(today)}</p>
          <p className="text-sm text-muted-foreground">
            {daysUntilNewYear(today)} days until New Year
          </p>
        </>
      ) : (
        <>
          <Skeleton className="h-6 w-56" />
          <Skeleton className="mt-1 h-4 w-36" />
        </>
      )}
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/use-today.json

Hook'u ve bağımlı olduğu her şeyi projenize ekler.

Kullanım

import { useToday } from "@/hooks/use-today"
const today = useToday()

if (!today) {
  return <Skeleton className="h-5 w-40" />
}

return <p>{format(today, "PPPP")}</p>

Bir bileşen bugünü vurgulamak, geçmiş günleri devre dışı bırakmak veya bir son tarihe geri saymak gibi geçerli tarihe bağlı olduğunda başvurun.

Neden new Date() değil

const today = new Date()

Tarihi işleme sırasında okumak iki şekilde bozulur:

  • Hydration uyuşmazlıkları. Sunucu kendi saat diliminde, belki saatler önce işler. Gece yarısına yakın sunucu ve tarayıcı günü konusunda anlaşamaz ve React sunucu HTML'ini atar.
  • Bayat tarihler. Gece boyunca açık bırakılan bir sekme, başka bir şey onu yeniden işleyene kadar dünü bugün olarak göstermeye devam eder.

useToday sunucuda ve hydration sırasında undefined, ardından yerel tarihi döndürür. Ayrıca gece yarısı ve sekme yeniden görünür olduğunda yeniden işler, çünkü arka plan sekmelerindeki zamanlayıcılar duraklatılabilir ve gece yarısını kaçırabilir.

Örnekler

Tarih sınırları

Geçmiş günleri ve 30 günden uzak her şeyi devre dışı bırakın. Bugün bilinene kadar hiçbir şey devre dışı bırakılmaz; böylece sunucu HTML'i ilk istemci işlemesiyle eşleşir.

"use client"

import { addDays } from "date-fns"

import { Calendar } from "@/components/ui/calendar"
import { useToday } from "@/hooks/use-today"

export function UseTodayBounds() {
  const today = useToday()

  return (
    <Calendar
      mode="single"
      disabled={today ? [{ before: today }, { after: addDays(today, 30) }] : []}
    />
  )
}

Tarih anahtarları

import {
  fromDateKey,
  getTodayKey,
  subscribeToday,
  toDateKey,
} from "@/hooks/use-today"

toDateKey(new Date(2026, 9, 5))
fromDateKey("2026-10-05")

const unsubscribe = subscribeToday(() => refreshAgenda())

Dosya ayrıca hook'un yapıldığı parçaları da dışa aktarır. Tarih anahtarları yerel YYYY-MM-DD dizeleridir. Güne göre karşılaştırılır, doğru sıralanır ve React key'leri veya önbellek anahtarları olarak kullanımı güvenlidir. subscribeToday gece yarısı ve sekmeye dönüşte React dışında sizi geri çağırır.

Bilmekte fayda var

  • Döndürülen Date yerel saatte gece yarısıdır; bu yüzden onu < veya > ile karşılaştırmak saatleri değil günleri karşılaştırır.
  • Gün değişene kadar aynı Date nesnesi geri gelir; bu yüzden effect bağımlılıklarında kullanımı güvenlidir.
  • undefined işlemesini planlayın. Bir skeleton veya tarihe dayalı sınırlar olmadan işleme, ikisi de çalışır.

API referansı

useToday()

DöndürürAçıklama
Date | undefinedBugünün yerel gece yarısı. Sunucuda ve hydration sırasında undefined.

Yardımcılar

ExportAçıklama
toDateKey(date)Yerel YYYY-MM-DD dizesi olarak bir Date.
fromDateKey(key)Yerel gece yarısı Date olarak bir YYYY-MM-DD dizesi.
getTodayKey()Bugünün tarih anahtarı.
subscribeToday(callback)Gece yarısı ve sekme görünür olduğunda geri çağırır. Bir abonelikten çıkma fonksiyonu döndürür.

Kullanıldığı yerler

Calendar ve onun üzerinden Date picker.

İlgili