Locale providerfoundation
LocaleProvider with locale, time zone, currency, text direction, week start and message overrides; useFormat and useMessages hooks used by every uikit component.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/locale의존 아이템style
Default
locale-demo.tsx
"use client";
import { LocaleProvider, useFormat, useLocaleSettings, useMessages } from "@/lib/locale";
const greetingMessages = { title: "Today", total: (n: number) => `${n} bookings` };
function Summary() { const format = useFormat(); const { locale, timeZone } = useLocaleSettings(); const t = useMessages("locale-demo", greetingMessages); return ( <div className="flex flex-col gap-1 rounded-lg border p-4"> <p className="text-sm font-medium">{t.title}</p> <p className="text-2xl font-semibold tabular-nums">{format.currency(1234567)}</p> <p className="text-sm text-muted-foreground"> {t.total(42)} · {locale} · {timeZone} </p> </div> );}
export default function LocaleDemo() { return ( <div className="grid gap-4 sm:grid-cols-2"> <LocaleProvider locale="en-US" timeZone="America/New_York" currency="USD"> <Summary /> </LocaleProvider> <LocaleProvider locale="ja-JP" timeZone="Asia/Tokyo" currency="JPY" messages={{ "locale-demo": { title: "本日", total: (n: number) => `予約 ${n} 件` } }}> <Summary /> </LocaleProvider> </div> );}