Hooks & Utils
Abhängigkeitsfreie React-Hooks und Formatierungsfunktionen als Quellcode – gibt es bei shadcn/ui und tweakcn nicht: kein npm-Paket, kein Update-Risiko, direkt anpassbar.
useDebounce
Verzögert Wertänderungen um ein konfigurierbares Delay.
npx hunjy-ui add use-debounceHält einen Wert erst fest, wenn sich für eine Weile nichts mehr ändert – klassisch für Live-Suchen, die nicht bei jedem Tastendruck einen Request auslösen sollen.
Debounced: –
useClipboard
Kopiert Text in die Zwischenablage inkl. kurzzeitigem „kopiert“-Status.
npx hunjy-ui add use-clipboardFür Copy-Buttons neben Code, API-Keys oder Links: copy(text) schreibt in die Zwischenablage, copied ist für ~2 Sekunden true, damit sich der Button-Text/Icon kurz ändern kann.
useMediaQuery
Liefert, ob eine CSS-Media-Query aktuell zutrifft.
npx hunjy-ui add use-media-querySSR-sicher: startet mit false und aktualisiert erst nach dem Mount, damit Next.js/Prerendering nicht bricht und es keinen Hydration-Mismatch gibt.
(min-width: 768px) trifft gerade zu: Nein
useLocalStorage
Hält einen Wert synchron mit localStorage.
npx hunjy-ui add use-local-storageWie useState, aber der Wert übersteht einen Reload. Tippe unten etwas ein und lade die Seite neu – der Wert bleibt.
Bleibt nach einem Reload erhalten (Key: hunjy-ui-docs-name).
useDisclosure
Offen/Zu-State für Dialog, Drawer, Popover & Co.
npx hunjy-ui add use-disclosureErspart das wiederkehrende useState(false) samt open/close/toggle-Callbacks – setOpen passt direkt auf kontrollierte Radix-Komponenten wie <Dialog open={isOpen} onOpenChange={setOpen}>.
useInterval
setInterval als Hook, ohne Stale-Closure-Probleme.
npx hunjy-ui add use-intervalDer Callback wird bei jedem Render aktualisiert, das Intervall selbst läuft aber unabhängig weiter – delay: null pausiert es sauber, ohne das Intervall neu zu erzeugen.
usePrevious
Liefert den Wert aus dem vorherigen Render.
npx hunjy-ui add use-previousPraktisch für Vorher/Nachher-Vergleiche oder um zu erkennen, ob sich ein Prop seit dem letzten Render geändert hat.
Aktuell: 0 · Vorher: –
useOnlineStatus
Verfolgt navigator.onLine live.
npx hunjy-ui add use-online-statusFür einen Offline-Hinweis-Banner: startet mit true (kein Hydration-Mismatch) und reagiert danach live auf online-/offline-Events.
Format-Utils
Formatierungsfunktionen auf Basis der Intl-API.
npx hunjy-ui add formatformatCurrency, formatNumber, formatRelativeTime, formatDate, truncate, slugify – reine Funktionen ohne eigene Abhängigkeit (z.B. kein date-fns nötig), für Tabellen, Karten und Formulare.
formatCurrency(1234.5)- 1.234,50 €
formatNumber(1234.5)- 1.234,5
formatRelativeTime(in 2h)- in 2 Stunden
formatDate(heute)- 11. Oktober 2026
truncate('Ein sehr langer Text…', 12)- Ein sehr la…
slugify('Hallo Welt! 42')- hallo-welt-42