What is react-rnd?
The react-rnd package is a React component that allows you to create resizable and draggable elements. It is highly customizable and can be used to build complex user interfaces with ease.
What are react-rnd's main functionalities?
Draggable
This feature allows you to make any element draggable. The code sample demonstrates how to create a draggable component with default position and size.
import Rnd from 'react-rnd';
function DraggableComponent() {
return (
<Rnd
default={{ x: 0, y: 0, width: 320, height: 200 }}
>
<div style={{ border: '1px solid black', padding: '10px' }}>
Draggable Content
</div>
</Rnd>
);
}
Resizable
This feature allows you to make any element resizable. The code sample demonstrates how to create a resizable component with resizing enabled on all sides and corners.
import Rnd from 'react-rnd';
function ResizableComponent() {
return (
<Rnd
default={{ x: 0, y: 0, width: 320, height: 200 }}
enableResizing={{ top: true, right: true, bottom: true, left: true, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true }}
>
<div style={{ border: '1px solid black', padding: '10px' }}>
Resizable Content
</div>
</Rnd>
);
}
Draggable and Resizable
This feature allows you to make any element both draggable and resizable. The code sample demonstrates how to create a component that can be dragged and resized.
import Rnd from 'react-rnd';
function DraggableResizableComponent() {
return (
<Rnd
default={{ x: 0, y: 0, width: 320, height: 200 }}
enableResizing={{ top: true, right: true, bottom: true, left: true, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true }}
>
<div style={{ border: '1px solid black', padding: '10px' }}>
Draggable and Resizable Content
</div>
</Rnd>
);
}
Other packages similar to react-rnd
react-draggable
react-draggable is a package that provides draggable functionality for React components. It is simpler and more focused on dragging compared to react-rnd, which also includes resizing capabilities.
react-resizable
react-resizable is a package that provides resizable functionality for React components. It is more focused on resizing compared to react-rnd, which also includes dragging capabilities.
react-grid-layout
react-grid-layout is a package that provides a grid layout system with draggable and resizable widgets. It is more complex and feature-rich compared to react-rnd, offering a complete layout system.