←Back to Patterns
UI Patterns Learning App
🔧 Formatting Data Pattern
Transform raw data into human-readable formats with proper localization, number formatting, and text transformations.
🎯 Interactive Example
Change locale and currency to see how data formatting adapts. All examples use real formatting functions.
📊 Number Formatting
Integer:
Raw: 1234567
1,234,567
Decimal:
Raw: 1234.5678
1,234.57
Currency:
Raw: 1234.56
$1,234.56
Percentage:
Raw: 0.8934
89.34%
Compact:
Raw: 1500000
1.5M
📅 Date & Time Formatting
Full Date:
Friday, March 15, 2024 at 2:30 PM
Short Date:
3/15/24
Relative Time:
Loading...
📝 Text Formatting
Title Case:
Raw: the quick brown fox jumps over the lazy dog
The Quick Brown Fox Jumps Over The Lazy Dog
Proper Name:
Raw: john doe
John Doe
Phone Number:
Raw: 1234567890
(123) 456-7890
Credit Card:
Raw: 4532123456789012
**** **** **** 9012
💻 Technical Formatting
File Size:
Raw: 1536 bytes
1.5 KB
Large File:
Raw: 15728640 bytes
15 MB
Duration:
Raw: 125 seconds
2:05
IP Address:
192.168.001.001
💻 Code Example
JSX
Loading source code...
✨ Key Features
✓
Internationalization
Support for multiple locales and currencies
✓
Number Formatting
Currency, percentages, and compact notation
✓
Date & Time
Localized dates and relative time formatting
✓
Data Masking
Secure display of sensitive information
🎯 Common Use Cases
💰
Financial Apps
Currency and number formatting
🌍
Global Applications
Multi-locale data display
📊
Analytics Dashboards
Data visualization and reporting