{"library":"react-rnd","title":"React RND","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-rnd"],"cli":null},"imports":["import { Rnd } from 'react-rnd';","import type { RndProps } from 'react-rnd';","import type { ResizableDelta } from 'react-rnd';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Rnd } from 'react-rnd';\n\nconst DraggableResizableBox: React.FC = () => {\n  const [size, setSize] = useState({\n    width: 320,\n    height: 200,\n  });\n  const [position, setPosition] = useState({\n    x: 100,\n    y: 100,\n  });\n\n  return (\n    <Rnd\n      size={{ width: size.width, height: size.height }}\n      position={{ x: position.x, y: position.y }}\n      onDragStop={(e, d) => {\n        setPosition({ x: d.x, y: d.y });\n      }}\n      onResizeStop={(e, direction, ref, delta, newPosition) => {\n        setSize({\n          width: parseInt(ref.style.width, 10),\n          height: parseInt(ref.style.height, 10),\n        });\n        setPosition(newPosition);\n      }}\n      minWidth={50}\n      minHeight={50}\n      bounds=\"window\"\n      style={{\n        border: '1px solid #ddd',\n        background: '#f9f9f9',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fontSize: '1.2em',\n        fontFamily: 'sans-serif',\n      }}\n    >\n      Drag and Resize Me!\n    </Rnd>\n  );\n};\n\nexport default DraggableResizableBox;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}