awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
bokuweb avatar

bokuweb/react-resizable-and-movable

0
View on GitHub↗
bokuweb.github.io/react-rnd/stories↗

React Resizable And Movable

This project is a React UI interaction library and component geometry manager. It provides a set of tools for creating elements within a React application that users can move and resize.

The library allows for the customization of interaction handles, enabling the application of custom components, styles, or CSS classes to the resize handles to match specific visual designs.

The system covers element manipulation through both direct user interaction and programmatic geometry updates. It includes capabilities for grid snapping, bounding constraints, and locked aspect ratios to control the position and size of UI components.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Features

  • Draggable and Resizable React Components - Provides React components that make DOM elements draggable and resizable with bounding constraints.
  • Drag and Resize Functionality - Makes DOM elements movable by dragging and resizable via their edges or corners.
  • React Drag and Resize Libraries - Provides a set of tools for handling drag and drop movements and element scaling in React.
  • Programmatic Position and Size - Programmatically controls the position, size and bounding constraints of UI elements.
  • Interactive UI Elements - Enables the design of user interfaces where elements can be freely moved and resized.
  • Mouse Event Handlers - Tracks mouse movement relative to click positions to calculate real-time element offsets and dimensions.
  • Geometry State Management - Triggers component re-renders by updating position and size properties within the internal React state tree.
  • Custom Resize Handles - Allows the application of custom components, styles, and CSS classes to resize handles.
  • Resize Mapping Logic - Translates interactions on specific element handles into precise dimensional changes.
  • Fixed Aspect Ratios - Implements constraints that maintain a constant relationship between width and height during resizing.
  • Boundary Validation - Provides logic to validate and prevent elements from crossing specified container boundaries during movement.
  • Grid Snapping - Aligns element positions and dimensions to a configurable pixel grid during user interaction.
  • Visual Layout Editors - Supports the creation of tools for arranging and scaling components on a canvas.
  • Miscellaneous Tools - Resizable and movable component.
4,309 stars·331 forks·TypeScript·MIT·22 views

Star history

Star history chart for bokuweb/react-resizable-and-movableStar history chart for bokuweb/react-resizable-and-movable

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

Frequently asked questions

What does bokuweb/react-resizable-and-movable do?

This project is a React UI interaction library and component geometry manager. It provides a set of tools for creating elements within a React application that users can move and resize.

What are the main features of bokuweb/react-resizable-and-movable?

The main features of bokuweb/react-resizable-and-movable are: Draggable and Resizable React Components, Drag and Resize Functionality, React Drag and Resize Libraries, Programmatic Position and Size, Interactive UI Elements, Mouse Event Handlers, Geometry State Management, Custom Resize Handles.

Which projects share features with bokuweb/react-resizable-and-movable?

Projects with overlapping indexed features include: bokuweb/react-rnd — react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable… daybrush/moveable — Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable! gui-cs/terminal.gui — Terminal.Gui is a cross-platform .NET toolkit for building interactive text-based user interfaces. It provides a… react-grid-layout/react-draggable — react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a… taye/interact.js — interact.js is a JavaScript interaction library used to implement drag and drop, resizing, and multi-touch gestures… gridstack/gridstack.js — gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive…

Projects sharing features with React Resizable And Movable

These projects share indexed features with React Resizable And Movable. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • bokuweb/react-rndbokuweb avatar

    bokuweb/react-rnd

    4,278View on GitHub↗

    react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system

    TypeScriptcomponentdragdraggable
    View on GitHub↗4,278
  • daybrush/moveabledaybrush avatar

    daybrush/moveable

    10,720View on GitHub↗

    Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

    TypeScriptdraggablegroupablemovable
    View on GitHub↗10,720
  • gui-cs/terminal.guigui-cs avatar

    gui-cs/Terminal.Gui

    11,068View on GitHub↗

    Terminal.Gui is a cross-platform .NET toolkit for building interactive text-based user interfaces. It provides a component-based architecture, a terminal rendering engine, and a declarative layout system to create console applications that run consistently across Windows, macOS, and Linux. The framework distinguishes itself with a comprehensive set of interactive console widgets, including data grids, hex editors, and hierarchical tree components. It supports advanced visual capabilities such as 24-bit True Color, Sixel image support, and a relative-coordinate layout system that adapts to ter

    C#consoleconsole-applicationcross-platform
    View on GitHub↗11,068
  • react-grid-layout/react-draggablereact-grid-layout avatar

    react-grid-layout/react-draggable

    9,292View on GitHub↗

    react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a component wrapper that adds draggable behavior to user interface elements, enabling them to be moved via mouse or touch interactions. The library provides touch-enabled interaction tools that unify pointer events across desktop browsers and touch screen devices. It utilizes CSS transforms to handle element movement and coordinate tracking. The system covers movement constraints such as axis restriction and boundary clamping to confine elements within specific areas. It includes posit

    JavaScript
    View on GitHub↗9,292
    • Compare all 30 related projects→