10 repositorios
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.
Este proyecto es una biblioteca de referencia de ejemplos de código funcional y demostraciones ejecutables. Proporciona guías de implementación y fragmentos prácticos para utilizar APIs del navegador, características de CSS, manipulaciones del DOM y componentes web. La colección incluye demostraciones en vivo de capacidades de estilo modernas, incluyendo patrones de diseño avanzados y APIs de pintura. También incluye muestras de referencia para construir elementos personalizados reutilizables utilizando estructuras de Shadow DOM para el desarrollo de interfaces de usuario modulares. La biblioteca cubre una amplia gama de capacidades del navegador, incluyendo procesamiento de flujos multimedia con modificación de fotogramas de video en tiempo real, patrones de comunicación entre contextos entre ventanas e iframes, y manipulación programática de elementos del DOM. Además, proporciona ejemplos de integración de hardware del dispositivo, como detección de postura para pantallas plegables y puentes de interfaz de sistema nativo para tareas como la selección de contactos. El repositorio contiene ejemplos basados en JavaScript diseñados para ser ejecutados dentro de un entorno de navegador en vivo.
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.