react-rnd

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.