10 repository-uri
Utilities for calculating spatial coordinates and element dimensions during user interactions.
Distinguishing note: Focuses on DOM-based coordinate calculation for drag-and-drop, distinct from general event tracking.
Explore 10 awesome GitHub repositories matching user interface & experience · Interaction Tracking. Refine with filters or upvote what's useful.
This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen
Calculates element coordinates and dimensions during drag interactions to determine drop targets and reordering logic.
This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs. The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject c
Maintains a centralized store of interactive components to enable efficient spatial lookups during drag operations.
React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input. The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accele
Calculates element coordinates and dimensions in real-time to determine drop targets and reordering logic during drag interactions.
This project is a collection of reusable React hooks designed to wrap browser APIs, manage state persistence, and handle DOM observation. It provides a consistent interface for integrating native browser capabilities directly into the React component lifecycle. The library includes specialized toolkits for monitoring the browser environment, such as window resizing, network connectivity, and viewport visibility. It also provides mechanisms for managing execution timing through debouncing, throttling, and the control of timeouts and intervals. Additional capabilities cover state management wi
Provides hooks for capturing mouse and touch screen interactions to trigger immediate component updates.
This project is a graphics library for React Native that provides a cross-platform vector rendering engine. It maps SVG XML elements to native graphics APIs, allowing for the creation of scalable shapes and custom illustrations that maintain visual consistency across mobile and web environments. The library functions as a mapper that converts standard SVG markup into declarative component structures. It enables the creation of interactive vector interfaces by providing components that can detect and respond to user touch events. Its capability surface includes drawing basic geometric primiti
Calculates spatial coordinates and boundaries to determine user interaction points within vector graphics.
tui.image-editor is a JavaScript image manipulation library and web-based photo editor. It provides a browser-based interface for cropping, resizing, and applying filters to images using the HTML5 Canvas API. The project is distinguished by its role as a canvas-based annotation tool, allowing users to add text, shapes, and freehand drawings as graphic overlays. It offers extensive UI customization through theme configuration, interface text localization, and the ability to replace default icons with custom SVG files. The library covers geometry manipulation, visual filter application, and im
Tracks spatial interactions such as object movement and scaling to trigger corresponding application logic.
Tabulator is an interactive data table library and virtual DOM data grid used to create high-performance tables from JSON or arrays. It functions as a hierarchical data viewer and a spreadsheet interface component, capable of rendering thousands of records efficiently through viewport-based virtualization and progressive loading. The library distinguishes itself by providing a full spreadsheet interface mode with multi-sheet management, cell range selection, and bulk copy-paste capabilities. It supports complex data architectures, including nested data field mapping, expandable tree structure
Dispatches events for cell, row, and column interactions such as clicks and mouse movements.
Togetherjs is a real-time collaboration framework designed to synchronize application state, cursors, and navigation across multiple user sessions. It provides a synchronization tool for shared browsing and a signaling server to facilitate peer-to-peer communication. The project integrates audio chat and media streaming via peer-to-peer technology, allowing collaborators to engage in live voice communication. It includes a presence and identity manager to map session participants to custom profiles, names, and avatars. The framework covers a broad surface of collaborative capabilities, inclu
Displays remote mouse cursors and click events to show where other users are focusing on a page.
This project is a comprehensive reference library of runnable code samples and implementation guides for Web APIs, CSS features, and modular web components. It provides a collection of live demonstrations illustrating how to implement browser APIs and programmatic DOM manipulation. The repository includes specialized demonstrations for interacting with device hardware, such as sensors, Bluetooth, USB, and foldable screen posture detection. It also features implementation guides for modern styling capabilities, including advanced layout patterns, custom functions, and painting APIs, alongside
Implements a system to monitor pointer events, touch gestures, keyboard input, and gamepad state.
This project is a jQuery plugin designed for creating responsive grid interfaces that support interactive drag-and-drop reordering and manual resizing of elements. It provides a framework for managing structured layouts where content can be organized into a grid system that automatically adjusts to maintain visual alignment. The library enables users to customize dashboards by rearranging and scaling widgets through mouse-based interactions. It utilizes a coordinate-based system to detect collisions and ensure that elements snap into valid slots, while providing callback functions to monitor
Monitors the reordering of grid elements by capturing position data during user-initiated drag operations.