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
Format dates as relative time strings ("2 hours ago") with auto-updates and multilingual support
useSwipeDirection
RTL-aware swipe directions and animation values for gesture-based interactions
useRTLAnimation
Framer Motion animation variants that automatically adjust for RTL layouts
useRelativeTime
HookFormat 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.
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
useSwipeDirection
HookRTL-aware swipe directions and animation values for gesture-based interactions
Overview
The useSwipeDirection hook provides directional values that automatically adjust based on text direction. In LTR, swiping left goes "next" — in RTL, swiping right goes "next". Works with any gesture library (react-swipeable, Framer Motion, etc.).
Also exports a standalone getCarouselDirection utility for carousel/pagination animation direction.
API Reference — Return Values
| Property | Type | LTR | RTL | Description |
|---|---|---|---|---|
next | SwipeDirection | 'left' | 'right' | Forward in content flow |
previous | SwipeDirection | 'right' | 'left' | Backward in content flow |
forward | number | 1 | -1 | Numeric direction multiplier |
slideIn | number | 100 | -100 | Slide-in animation value |
slideOut | number | -100 | 100 | Slide-out animation value |
isRTL | boolean | false | true | Current direction state |
mirror(value) | (T) => T | identity | flipped | Mirror any number or direction string |
Features
- All directional values flip automatically in RTL
- Works with react-swipeable, Framer Motion, or any gesture library
- Provides both string directions and numeric multipliers
- Generic
mirror()helper for custom values - Standalone
getCarouselDirection()for pagination logic - TypeScript support with full type safety
useRTLAnimation
HookFramer Motion animation variants that automatically adjust for RTL layouts
Overview
The useRTLAnimation hook provides pre-built Framer Motion variants for slides, fades, and dismissals that automatically flip direction in RTL. Configurable distance, duration, and easing.
Also exports useRTLDragConstraints for flipping horizontal drag bounds in RTL.
API Reference — Config
| Parameter | Type | Default | Description |
|---|---|---|---|
distance | number | 100 | Animation distance in pixels |
duration | number | 0.3 | Animation duration in seconds |
ease | Easing | 'easeInOut' | Framer Motion easing function |
API Reference — Return Values
| Property | Type | Description |
|---|---|---|
slideVariants | Variants | Full slide animation (enter/center/exit) — ideal for carousels |
fadeSlideVariants | Variants | Fade + half-distance slide — smoother for content transitions |
swipeVariants | Variants | Swipe-to-dismiss (initial/dismissed) — for cards and modals |
isRTL | boolean | Current direction state |
getDirection(n) | (number) => number | Flip a direction value for RTL |
Features
- Three variant sets covering common animation patterns
- All variants accept a
customdirection prop for bidirectional navigation - Configurable distance, duration, and easing
- Built on
useSwipeDirection— no duplicate RTL logic - Companion
useRTLDragConstraintsfor drag interactions - TypeScript support with full type safety
Coming Soon
formatDate
Locale-aware date formatting with Arabic numerals
formatNumber
Locale-aware number formatting
toArabicNumerals
Convert numbers to Eastern Arabic numerals (٠١٢٣)
getTextDirection
Auto-detect text direction from content
isRTL
Check if a locale is RTL