react-rnd

library10.5.3jsnpmunverified

React RND is a versatile React component that combines both draggable and resizable functionalities into a single, cohesive unit. It allows developers to easily create UI elements that users can move around and change the dimensions of within their applications. The current stable version is 10.5.3, with a fairly active release cadence, frequently incorporating bug fixes and minor feature enhancements. Key differentiators include its robust API for controlling size and position (both controlled and uncontrolled modes), its ability to set drag and resize bounds, and its integration of underlying libraries like `react-draggable` and `re-resizable` to provide a comprehensive solution without requiring developers to combine these functionalities themselves. It ships with TypeScript types, facilitating safer development in larger codebases.

web-framework

npm install react-rnd

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-RND

react-rnd

web-frameworkjavascriptv10.5.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Rnd

✓ import { Rnd } from 'react-rnd';

✗ const Rnd = require('react-rnd');

Rnd is a named export. While CommonJS `require` might work with transpilers, direct named import is the standard and recommended way for modern React applications.

RndProps

✓ import type { RndProps } from 'react-rnd';

✗ import { RndProps } from 'react-rnd';

Importing types should use `import type` for better tree-shaking and clarity in TypeScript projects.

ResizableDelta

✓ import type { ResizableDelta } from 'react-rnd';

Commonly used for handling resize events, especially for the `onResizeStop` and `onResize` callbacks.

This example demonstrates a controlled `Rnd` component that manages its size and position through React state using `useState` hooks. It updates the component's dimensions and coordinates on drag and resize stop events, and also sets minimum size constraints and bounds to the window.

import React, { useState } from 'react'; import { Rnd } from 'react-rnd'; const DraggableResizableBox: React.FC = () => { const [size, setSize] = useState({ width: 320, height: 200, }); const [position, setPosition] = useState({ x: 100, y: 100, }); return ( <Rnd size={{ width: size.width, height: size.height }} position={{ x: position.x, y: position.y }} onDragStop={(e, d) => { setPosition({ x: d.x, y: d.y }); }} onResizeStop={(e, direction, ref, delta, newPosition) => { setSize({ width: parseInt(ref.style.width, 10), height: parseInt(ref.style.height, 10), }); setPosition(newPosition); }} minWidth={50} minHeight={50} bounds="window" style={{ border: '1px solid #ddd', background: '#f9f9f9', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.2em', fontFamily: 'sans-serif', }} > Drag and Resize Me! </Rnd> ); }; export default DraggableResizableBox;

Debug

Known issues

gotchaWhen using the `size` and `position` props for controlled components, you must provide corresponding `onResizeStop` and `onDragStop` (or `onResize` / `onDrag`) handlers to update the state. Without these handlers, the component will not visually update as it will be 'stuck' at its initial `size` and `position` values due to React's controlled component pattern.

fix

Ensure `onDragStop` and `onResizeStop` callbacks update the state variables (`x`, `y`, `width`, `height`) that are passed to the `position` and `size` props respectively.

affects: >=9.0.0

gotchaMixing the `default` prop (for uncontrolled behavior) with `size` or `position` props (for controlled behavior) can lead to unexpected results. If `size` or `position` are provided, they take precedence.

fix

Choose either the `default` prop for an uncontrolled component or `size`/`position` props with state management for a controlled component. Do not use both simultaneously for the same properties.

affects: >=9.0.0

gotchaPrior to v10.4.1, the `bounds` prop had more limited support for HTML elements. While string selectors and object definitions were supported, passing a direct `HTMLElement` reference was not officially supported or fully functional.

fix

Upgrade to `react-rnd@10.4.1` or newer to reliably pass an `HTMLElement` reference to the `bounds` prop. For older versions, use string selectors (e.g., `'body'`) or define bounds with `{ left, top, right, bottom }` coordinates.

affects: <10.4.1

gotchaVersion 10.1.10 explicitly downgraded the `react-draggable` dependency to `v4.2.0`. This indicates potential compatibility issues with newer versions of `react-draggable` at that time. Users manually updating their `react-draggable` dependency might encounter unexpected drag behavior or errors if their `react-rnd` version is not compatible.

fix

Stick to the `react-draggable` version specified in `react-rnd`'s `package-lock.json` or `yarn.lock`. If experiencing issues, verify the `react-draggable` version used by `react-rnd` via `npm ls react-draggable` and downgrade if necessary.

affects: >=10.1.10

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'x')

This often occurs when `position` or `size` props are used to control the component, but the corresponding `x`, `y`, `width`, or `height` values are not properly initialized or updated in the component's state, leading to `undefined` being passed.

fix

Ensure that if `position` and `size` props are used, they are always provided with valid numerical or string values, and are updated via `onDragStop` or `onResizeStop` handlers.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

This React error indicates that the `Rnd` component was not imported correctly, often seen when attempting to use CommonJS `require('react-rnd')` without accessing the default export (`.default`) or when using a named export incorrectly.

fix

Use the correct ES module named import: `import { Rnd } from 'react-rnd';`. If strictly using CommonJS (less common in modern React), ensure it's `const Rnd = require('react-rnd').Rnd;`.

The 'bounds' prop must be a string, a DOM node, or an object with 'left', 'top', 'right', 'bottom' properties.

An invalid type or malformed object was passed to the `bounds` prop, which expects specific formats to define the draggable/resizable area.

fix

Provide `bounds` as either a CSS selector string (e.g., `'parent'`), a direct `HTMLElement` reference (>=v10.4.1), or an object like `{ left: 0, top: 0, right: 100, bottom: 100 }`.

Upgrade

Version history

10.5.3latest on npm

Audit

Dependencies

reactrequiredRequired for any React component.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/bokuweb/react-rnd ↗

packagehttps://www.npmjs.com/package/react-rnd ↗