Projects sharing features with React Rnd

react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit

Draggabilly is a JavaScript drag and drop library used to make DOM elements draggable on desktop and mobile. It serves as a coordinate-based UI tool and interaction library for tracking and setting the horizontal and vertical positions of interface elements during user interaction. The library provides a mobile-ready touch handler that converts mouse and touch movements into element translation. It includes specialized capabilities for restricting movement to specific axes or container boundaries and implements grid snapping to align elements to a predefined pixel grid. The tool manages the

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

React Grid Layout is a toolkit for building draggable, resizable, and responsive dashboard interfaces. It functions as a coordinate-based grid system that reconciles component positions and dimensions through declarative metadata, allowing developers to manage complex collections of UI elements that users can interact with directly. The library distinguishes itself through an automated packing algorithm that maintains structural integrity by shifting elements to fill gaps and resolving overlaps. It supports responsive design by monitoring container width changes against pre-defined breakpoint

This project is a CSS layout framework that functions as a responsive UI geometry solver. It replaces traditional static box model calculations with a constraint-based engine that determines element positions and dimensions by evaluating relational rules. The engine distinguishes itself by using a system of linear equations to resolve geometric conflicts, ensuring that all spatial constraints are satisfied simultaneously. It utilizes a shorthand visual syntax to define these relationships, allowing developers to describe complex alignment and spacing requirements through a declarative languag

interact.js is a JavaScript interaction library used to implement drag and drop, resizing, and multi-touch gestures within web browsers. It provides a specialized interaction framework for scalable vector graphics, allowing these elements to be moved and resized. The library features a multi-touch gesture engine that recognizes complex patterns such as pinch and rotate, and a coordinate snapping engine for aligning elements to grids or restricting movement within boundaries. It also includes a cross-frame state synchronizer to share interaction states and input events across multiple browser

React Grid Layout is a draggable and resizable grid system for React that organizes components into a coordinate-based layout. It functions as a responsive layout manager and a serialized grid state engine, providing the tools necessary to create user-customizable workspaces where interface elements can be moved and resized. The system distinguishes itself through breakpoint-driven layout mapping, which adjusts grid configurations based on container width. It utilizes a serialized state model to convert spatial positions and dimensions into data formats for saving and restoring user layouts,

GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a

This project is a curated collection of technical questions and answers designed to assist developers in preparing for software engineering interviews within the iOS ecosystem. It serves as a structured study tool for evaluating proficiency in mobile application architecture, system design, and core programming concepts. The repository provides a comprehensive reference for essential development topics, including memory management, concurrency, design patterns, and data persistence. By covering these foundational areas, it enables users to review common industry interview subjects and test th

Dragula is a JavaScript drag and drop library and DOM element manipulator used to move and reorder HTML elements between multiple containers. It functions as a UI interaction framework and event manager that tracks drag lifecycles to facilitate the movement of elements within a web browser interface. The library distinguishes itself through configurable constraint validation, allowing developers to define which elements are draggable and which containers are permitted drop targets. It supports specialized interaction patterns such as element cloning, the use of specific drag handles to restri

This project is a drag-and-drop UI library and a Vue 3 component for implementing sortable lists and state-synced interfaces. It acts as a wrapper for the Sortable.js library, providing a state-synced list component that automatically updates the underlying data array when items are reordered or moved. The library supports nested draggable interfaces and hierarchical data organization, allowing draggable containers to be nested inside other movable items to create multi-level structures. It also enables multi-column data transfer, allowing elements to be moved or cloned between different drag

This project is a curated study guide and knowledge base designed to assist software engineers in preparing for technical interviews within the iOS development ecosystem. It provides a structured collection of questions and answers focused on Swift and Objective-C, serving as a comprehensive reference for mastering the core concepts required for professional technical assessments. The repository distinguishes itself by bridging the gap between theoretical knowledge and practical application. It covers essential industry-standard practices, including architectural patterns, memory management s

gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

This library provides a set of directives for building sortable, hierarchical user interfaces within the Angular framework. It leverages the native HTML5 drag-and-drop API to enable direct manipulation of data objects, allowing users to reorder items and manage complex list structures through intuitive browser interactions. The project distinguishes itself by supporting nested data visualization, enabling the creation of tree structures that maintain their hierarchy during drag-and-drop operations. It offers granular control over these interactions through custom drag handles, which restrict

vue-draggable-plus is a drag-and-drop library for Vue 2 and Vue 3 used to create data-bound draggable interfaces. It provides components for implementing list sorting and reordering elements within a sequence while synchronizing the visual position of items with the underlying application state. The library includes a cross-list transfer tool that enables the movement of items between multiple containers using shared group identifiers and cloning rules. Interaction can be restricted to specific child elements through handle-based triggering. The project covers a broad range of drag-and-drop

This project is a Three.js utility library and a collection of declarative React components designed for building 3D scenes. It provides a set of abstractions that wrap low-level primitives to manage lifecycles and memory disposal, serving as a geometry generator, a post-processing pipeline, and a scroll-driven animation tool. The library is distinguished by its specialized camera control systems, which include unified abstractions for orbit and perspective views as well as real-time face tracking and landmark detection via webcam feeds. It also features interactive transform gizmos for objec

GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

This project is a system of components and utilities for managing split-view layouts in React applications. It provides a resizable panel system that organizes content into horizontal and vertical areas with draggable boundaries. The system includes a collapsible UI layout tool for toggling the visibility of panels to maximize available screen space. It supports recursive panel nesting, allowing layouts to be structured as trees where panels contain further groups of resizable panels. The library covers layout construction through the use of panel dimension constraints, enabling the definiti

This project is a multi-platform UI framework designed for building applications that target mobile, web, and desktop environments from a single codebase. It utilizes a declarative paradigm where the user interface is defined as a function of application state, supported by a layered architecture that includes a high-performance rendering engine and a multi-platform compilation model. The framework provides a comprehensive suite of developer tools, including hot reloading for real-time code injection and diagnostic utilities for monitoring application state and performance. It features a modu

react-native-reusables is a cross-platform mobile UI library and an accessible component kit used to build consistent interfaces across different screen sizes. It functions as a Tailwind CSS component library, providing pre-styled interface elements that utilize utility classes for styling and layout. The project enables cross-platform UI development for iOS and Android through a shared set of reusable visual components. It supports mobile interface prototyping and the creation of cohesive design systems by utilizing standardized, themeable interface elements to maintain uniform branding. Th

iOS9AdaptationTips is a collection of technical strategies and guides for adapting mobile applications to the iOS 9 operating system. It serves as a development resource for implementing system integration, UI layout adaptations, and push notification configurations. The project provides specific guidance on flexible interface implementation, including support for split-screen modes, dynamic text scaling, and status bar configurations. It also covers the use of secure certificates and heartbeat signals to maintain persistent connection stability for push notifications. The material covers br

This is a layout library for Android applications that implements the CSS Flexible Box layout model. It provides a view container and engine that arrange child views by distributing space and aligning content according to a flexible box model. The framework enables the creation of responsive user interfaces that automatically adjust element positioning, wrapping, and growth based on available screen dimensions and orientations. The system includes capabilities for adaptive layout workflows, dynamic element alignment, and a virtualized rendering system for recycling views to display large dat

Grommet is a React UI framework and accessible component library designed for building themed user interfaces. It provides a responsive design system and a themed interface toolkit to ensure inclusive user experiences across various screen sizes and device orientations. The framework emphasizes accessible UI development by providing pre-styled elements that follow web accessibility standards for screen readers and keyboard navigation. It enables the implementation of custom themes through a centralized system that manages visual styles and design tokens. The toolkit covers responsive web des

Cropper.js is a JavaScript image cropping library and client-side image editor. It provides a front-end interface for manipulating image geometry and extracting specific regions using the HTML5 Canvas API. The library enables interactive image cropping where users can manually select areas and define clipping regions. It supports geometry transformations including rotation, scaling, and zooming to align subjects, and allows for the enforcement of dynamic aspect ratios. The tool provides capabilities for exporting crop data as coordinates or canvas representations and offers access to interna

Cropper is a JavaScript image cropping library and HTML5 canvas image editor. It serves as a web-based image manipulation tool that allows users to visually select and trim specific areas of an image directly within a browser. The library provides a visual interface for defining precise crop areas with configurable aspect ratios and zoom controls. It includes tools to rotate, scale, and zoom images to align subjects before exporting the final result. The tool handles browser-based image processing by generating a canvas element from a selected image area for use or download. It manages crop

This project provides a React component and a set of utilities for implementing interactive image cropping. It enables users to define selection areas over media elements using a draggable and resizable interface. The library supports fixed aspect ratio locking and the definition of custom crop shapes, such as circles. It utilizes a percentage-based coordinate system to ensure the selection interface remains responsive across different screen sizes and layouts. The toolset includes capabilities for real-time crop previewing and the generation of cropped regions using canvas-based rendering.