OSS Tanbou
View on GitHubProject website

react-rnd — add dragging and resizing to React elements in one component

OSS scale score 206.6OSS health 53Update pace 0 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
4,325
Primary language
TypeScript
License
MIT
Repository last updated
May 12, 2026

Overview

react-rnd is a React component for elements that users can drag and resize. It supports simple uncontrolled defaults as well as fully controlled position and size state managed by a parent component.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Manage position and size through one Rnd component

Use default for an uncontrolled starting position and size, or combine position, size, and callbacks for controlled state.

Sources: [2]

Configure grids, aspect ratio, and handles

Drag and resize grids, min/max dimensions, aspect-ratio locking, drag handles, and resize handles are configurable.

Sources: [2]

For movable panels in dashboards and editors

It fits window-like UIs, dashboards, canvases, and editors where users directly reposition or resize elements.

Sources: [2]

Keep parent scale and controlled state synchronized

When a parent uses CSS scaling, configure the scale prop. In controlled mode, update parent state from drag and resize callbacks so visual state does not drift.

Sources: [2]

Official sources

  1. [1]bokuweb/react-rnd repository(2026-09-21)
  2. [2]react-rnd README(2026-09-21)
  3. [3]react-rnd package(2026-09-21)
  4. [4]react-rnd MIT license(2026-09-21)
Supplemental curator note

react-rnd combines drag and resize behavior in a single `Rnd` component. The current package is 10.5.3 and its peer dependencies accept React and React DOM 16.3+. If a parent is scaled with CSS transforms, configure `scale` so drag and resize deltas remain accurate.

Try it in 3 steps

  1. 1

    Install react-rnd

    Add the package to a React project using the official npm install command.

    npm i -S react-rnd
  2. 2

    Render an Rnd component

    Start with the README default-position and default-size example.

    <Rnd default={{ x: 0, y: 0, width: 320, height: 200 }}>Rnd</Rnd>
  3. 3

    Try dragging and resizing

    Move and resize the element, then adopt controlled position/size state if the application requires it.

    Drag the element → resize from a handle
Check the official README

Growth

Growth trends · Last 30 days

4,325 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
0
Open PRs
25

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • react
  • drag
  • resize
  • resizable
  • component
  • draggable
Stars
4,325
Forks
330
Watchers
19
Open issues
156
Contributors
41
Primary language
TypeScript
License
MIT
Repository last updated
May 12, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.