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