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