Formatting Pattern
Format numbers, currency, text, and file sizes consistently across your application using native Intl APIs and custom helpers.
What's Included#
- Number formatting with locale support, compact notation, percentages, and ordinals
- Currency formatting with Stripe-compatible cents-to-dollars conversion
- Text utilities for truncation, title case, slugification, and pluralization
- Search text highlighting with a React component
- File size formatting with human-readable units (KB, MB, GB)
- Duration and timer formatting for countdowns and video lengths
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the formatting pattern from Bootspring"
- "Apply the Bootspring formatting pattern to my project"
Key Considerations#
- Use native Intl APIs for locale-aware number and currency formatting
- Be consistent with format patterns across the entire application
- Handle edge cases like zero values, negatives, and very large numbers
- Wrap formatters in reusable React components for consistent rendering
- Memoize expensive formatting operations when rendering large lists
Related Patterns#
- Date Handling - Date and time formatting
- Validation - Input validation
- Tables - Displaying formatted data