10 个仓库
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.
该项目是一个函数式代码示例和可运行演示的参考库。它提供了使用浏览器 API、CSS 特性、DOM 操作和 Web 组件的实现指南及实用代码片段。 该集合展示了现代样式能力的实时演示,包括高级布局模式和绘图 API。它还包含使用 Shadow DOM 结构构建可重用自定义元素的参考示例,用于模块化用户界面开发。 该库涵盖了广泛的浏览器功能,包括具有实时视频帧修改功能的媒体流处理、窗口与 iframe 之间的上下文间通信模式,以及程序化 DOM 元素操作。它还提供了设备硬件集成的示例,例如折叠屏的姿态检测,以及用于联系人选择等任务的原生系统接口桥接。 该仓库包含旨在在实时浏览器环境中执行的 JavaScript 示例。
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.