Utilities Use Cases

1. Category Reference

The Utilities package is organized into focused categories, each importable independently.

Category	Import Path	Key Functions	Description
accessibility	./accessibility	trapFocus, restoreFocus	Focus management and screen reader helpers
adapters	./adapters	--	External service adapters
animation	./animation	fadeIn, fadeOut, slideToggle	Animation utilities
date	./date	formatDate, parseDate	Date formatting
dom	./dom	addClass, removeClass, createElement	DOM manipulation
elements	./elements	--	Element creation helpers
events	./events	debounce, throttle	Event handling
media	./media	matchMedia	Media query helpers
network	./network	fetchData	Network request utilities
performance	./performance	lazyLoad	Performance optimization
storage	./storage	getItem, setItem	Local storage helpers
string	./string	truncate, slugify	String manipulation
styles	./styles	jssToCSS	JSS to CSS conversion
theme	./theme	--	Theme management
validation	./validation	isValidEmail	Input validation

2. Import Patterns

Category Import

import * as dom from '@universityofmaryland/web-utilities-library/dom';

dom.addClass(element, 'active');

Individual Function Import

import { addClass } from '@universityofmaryland/web-utilities-library/dom/addClass';

Namespace Import

import * as Utilities from '@universityofmaryland/web-utilities-library';

Utilities.dom.addClass(element, 'active');

Tree-shaking Tip

Category imports and individual function imports both tree-shake well. Use individual imports when you only need a single function from a large category.

3. Most-Used Utilities

DOM: addClass / removeClass

Add or remove CSS classes from elements:

import * as dom from '@universityofmaryland/web-utilities-library/dom';

const card = document.querySelector('.card');
dom.addClass(card, 'active');
dom.removeClass(card, 'hidden');

Events: debounce

Debounce high-frequency events like scroll and resize:

import * as events from '@universityofmaryland/web-utilities-library/events';

const handleResize = events.debounce(() => {
  // Recalculate layout
  updateGridColumns();
}, 250);

window.addEventListener('resize', handleResize);

Accessibility: trapFocus

Trap keyboard focus within a modal or dialog:

import * as a11y from '@universityofmaryland/web-utilities-library/accessibility';

const modal = document.querySelector('.modal');

// Trap focus inside the modal when it opens
a11y.trapFocus(modal);

// Restore focus to the trigger element when it closes
a11y.restoreFocus();

Animation: fadeIn

Animate element visibility transitions:

import * as animation from '@universityofmaryland/web-utilities-library/animation';

const panel = document.querySelector('.info-panel');

// Fade in with default duration
animation.fadeIn(panel);

// Fade out when closing
animation.fadeOut(panel);

Styles: jssToCSS

Convert JSS (JavaScript Style Sheets) objects to CSS strings:

import * as styles from '@universityofmaryland/web-utilities-library/styles';

const jssObject = {
  '.card': {
    padding: '1rem',
    backgroundColor: '#fff',
    '&:hover': {
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
    },
  },
};

const cssString = styles.jssToCSS(jssObject);
// Output: .card { padding: 1rem; background-color: #fff; }
//         .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }