React
React Utilities Helpers JavaScript

React Utility Functions - Common Helpers

Collection of useful React utility functions for formatting, validation, and data manipulation.

Common utility functions for React development.

Format Date

export function formatDate(date, format = 'YYYY-MM-DD') {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    
    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day);
}

// Usage
formatDate(new Date(), 'YYYY-MM-DD'); // "2025-01-25"

Format Currency

export function formatCurrency(amount, currency = 'USD', locale = 'en-US') {
    return new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currency,
    }).format(amount);
}

// Usage
formatCurrency(1234.56); // "$1,234.56"

Validate Email

export function isValidEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

// Usage
isValidEmail('user@example.com'); // true

Truncate Text

export function truncate(text, maxLength, suffix = '...') {
    if (text.length <= maxLength) return text;
    return text.slice(0, maxLength - suffix.length) + suffix;
}

// Usage
truncate('Long text here', 10); // "Long text..."

Debounce Function

export function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Usage
const debouncedSearch = debounce((query) => {
    console.log('Searching:', query);
}, 500);

Features

  • Pure functions
  • Reusable across projects
  • Well-tested
  • TypeScript ready