Utilities & Helpers
Helper functions and hooks for building RTL-first applications. These utilities handle common patterns like date formatting, text direction, and multilingual number display.
useRelativeTime
Hook
Format dates as relative time strings with auto-updates and multilingual support
Overview
The useRelativeTime hook formats dates as relative time strings (e.g., "2 hours ago", "منذ ساعتين") and automatically updates them at a specified interval.
It supports 4 locales (English, Arabic, French, Urdu) and handles all time ranges from seconds to years with proper pluralization.
Usage
import { useRelativeTime } from 'noorui-rtl'
function CommentTimestamp({ createdAt, locale }) {
const timeAgo = useRelativeTime(createdAt, locale)
return <span>{timeAgo}</span>
}
// Example output (English): "2 hours ago"
// Example output (Arabic): "منذ ساعتين"API Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
date | Date | string | - | The date to format (Date object or ISO string) |
locale | 'en' | 'ar' | 'fr' | 'ur' | 'en' | Locale for translations |
options.updateInterval | number | 60000 | Update interval in milliseconds (default: 1 minute) |
options.format | 'short' | 'long' | 'long' | Format style (not yet implemented) |
Features
- Automatic updates at customizable intervals
- Full localization for 4 locales (en, ar, fr, ur)
- Handles all time ranges (seconds, minutes, hours, days, weeks, months, years)
- Proper pluralization for each locale
- Automatic cleanup on unmount
- TypeScript support with full type safety
Coming Soon
Date & Time
formatDate
Locale-aware date formatting with Arabic numerals
Numbers
formatNumber
Locale-aware number formatting
Numbers
toArabicNumerals
Convert numbers to Eastern Arabic numerals (٠١٢٣)
Text & Direction
getTextDirection
Auto-detect text direction from content
Text & Direction
isRTL
Check if a locale is RTL