uxlift

uxlift

UXLift is a lightweight utility library designed to elevate front-end user experience (UX). It provides helpers and patterns for focus management, keyboard navigation, smooth interactions, and accessibility enhancements — all with minimal dependencies.

✨ Features

• 🎯 Focus management helpers
• 🎹 Keyboard interaction utilities
• 🪄 Smooth animation triggers
• ♿ Accessibility-first utilities
• 🧱 Framework-agnostic and tiny footprint

📦 Installation

npm install uxlift

or with yarn:

yarn add uxlift

🚀 Usage

import { trapFocus, smoothScrollTo, onKeyCombo } from 'uxlift';

// Trap focus inside a modal
trapFocus(document.querySelector('#my-modal'));

// Smooth scroll to an element
smoothScrollTo(document.querySelector('#features'));

// Keyboard shortcut: Ctrl + /
onKeyCombo('Control+/', () => {
  console.log('Shortcut triggered!');
});

📚 API Reference

trapFocus(container: HTMLElement)

Locks focus within a container (e.g., modal or dialog) to improve keyboard navigation.

smoothScrollTo(element: HTMLElement, options?: ScrollOptions)

Smoothly scrolls to an element with optional behavior ({ behavior: 'smooth', block: 'start' }).

onKeyCombo(combo: string, callback: Function)

Registers a keyboard shortcut. Combos like 'Control+/', 'Shift+Enter', etc.

🌐 Compatibility

• Works with all modern browsers
• No dependencies
• Ideal for SPA frameworks (React, Vue, Svelte) or vanilla JS

🧪 Coming Soon

• Focus ring styling
• Dynamic ARIA attribute toggling
• Prefetching on hover (UX optimization)

🤝 Contributing

Contributions are welcome! Please open issues or submit PRs.

📄 License

MIT © 2025