react-rnd

  • Version 10.4.14
  • Published
  • 86.2 kB
  • 3 dependencies
  • MIT license

Install

npm i react-rnd
yarn add react-rnd
pnpm add react-rnd

Overview

A draggable and resizable React Component

Index

Classes

class Rnd

class Rnd extends React.PureComponent<Props, State> {}

    constructor

    constructor(props: Props);

      property defaultProps

      static defaultProps: DefaultProps;

        property draggable

        draggable: Draggable;

          property offsetFromParent

          offsetFromParent: { left: number; top: number };

            property originalPosition

            originalPosition: { x: number; y: number };

              property resizable

              resizable: Resizable;

                property resizableElement

                resizableElement: { current: HTMLElement | null };

                  property resizingPosition

                  resizingPosition: { x: number; y: number };

                    method componentDidMount

                    componentDidMount: () => void;

                      method getDraggablePosition

                      getDraggablePosition: () => { x: number; y: number };

                        method getMaxSizesFromProps

                        getMaxSizesFromProps: () => MaxSize;

                          method getOffsetHeight

                          getOffsetHeight: (boundary: HTMLElement) => number;

                            method getOffsetWidth

                            getOffsetWidth: (boundary: HTMLElement) => number;

                              method getParent

                              getParent: () => any;

                                method getParentSize

                                getParentSize: () => { width: number; height: number };

                                  method getSelfElement

                                  getSelfElement: () => HTMLElement | null;

                                    method onDrag

                                    onDrag: (e: RndDragEvent, data: DraggableData) => false | void;

                                      method onDragStart

                                      onDragStart: (e: RndDragEvent, data: DraggableData) => void;

                                        method onDragStop

                                        onDragStop: (e: RndDragEvent, data: DraggableData) => false | void;

                                          method onResize

                                          onResize: (
                                          e: MouseEvent | TouchEvent,
                                          direction: ResizeDirection,
                                          elementRef: HTMLElement,
                                          delta: { height: number; width: number }
                                          ) => void;

                                            method onResizeStart

                                            onResizeStart: (
                                            e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
                                            dir: ResizeDirection,
                                            elementRef: HTMLElement
                                            ) => void;

                                              method onResizeStop

                                              onResizeStop: (
                                              e: MouseEvent | TouchEvent,
                                              direction: ResizeDirection,
                                              elementRef: HTMLElement,
                                              delta: { height: number; width: number }
                                              ) => void;

                                                method render

                                                render: () => React.JSX.Element;

                                                  method updateOffsetFromParent

                                                  updateOffsetFromParent: () => { top: number; left: number } | undefined;

                                                    method updatePosition

                                                    updatePosition: (position: Position) => void;

                                                      method updateSize

                                                      updateSize: (size: { width: number | string; height: number | string }) => void;

                                                        Interfaces

                                                        interface Props

                                                        interface Props {}

                                                          property allowAnyClick

                                                          allowAnyClick?: boolean;

                                                            property bounds

                                                            bounds?: string | Element;

                                                              property cancel

                                                              cancel?: string;

                                                                property children

                                                                children?: React.ReactNode;

                                                                  property className

                                                                  className?: string;

                                                                    property default

                                                                    default?: {
                                                                    x: number;
                                                                    y: number;
                                                                    } & Size;

                                                                      property disableDragging

                                                                      disableDragging?: boolean;

                                                                        property dragAxis

                                                                        dragAxis?: 'x' | 'y' | 'both' | 'none';

                                                                          property dragGrid

                                                                          dragGrid?: Grid;

                                                                            property dragHandleClassName

                                                                            dragHandleClassName?: string;

                                                                              property enableResizing

                                                                              enableResizing?: ResizeEnable;

                                                                                property enableUserSelectHack

                                                                                enableUserSelectHack?: boolean;

                                                                                  property lockAspectRatio

                                                                                  lockAspectRatio?: boolean | number;

                                                                                    property lockAspectRatioExtraHeight

                                                                                    lockAspectRatioExtraHeight?: number;

                                                                                      property lockAspectRatioExtraWidth

                                                                                      lockAspectRatioExtraWidth?: number;

                                                                                        property maxHeight

                                                                                        maxHeight?: number | string;

                                                                                          property maxWidth

                                                                                          maxWidth?: number | string;

                                                                                            property minHeight

                                                                                            minHeight?: number | string;

                                                                                              property minWidth

                                                                                              minWidth?: number | string;

                                                                                                property onDrag

                                                                                                onDrag?: RndDragCallback;

                                                                                                  property onDragStart

                                                                                                  onDragStart?: RndDragCallback;

                                                                                                    property onDragStop

                                                                                                    onDragStop?: RndDragCallback;

                                                                                                      property onMouseDown

                                                                                                      onMouseDown?: (e: MouseEvent) => void;

                                                                                                        property onMouseUp

                                                                                                        onMouseUp?: (e: MouseEvent) => void;

                                                                                                          property onResize

                                                                                                          onResize?: RndResizeCallback;

                                                                                                            property onResizeStart

                                                                                                            onResizeStart?: RndResizeStartCallback;

                                                                                                              property onResizeStop

                                                                                                              onResizeStop?: RndResizeCallback;

                                                                                                                property position

                                                                                                                position?: {
                                                                                                                x: number;
                                                                                                                y: number;
                                                                                                                };

                                                                                                                  property resizeGrid

                                                                                                                  resizeGrid?: Grid;

                                                                                                                    property resizeHandleClasses

                                                                                                                    resizeHandleClasses?: HandleClasses;

                                                                                                                      property resizeHandleComponent

                                                                                                                      resizeHandleComponent?: HandleComponent;

                                                                                                                        property resizeHandleStyles

                                                                                                                        resizeHandleStyles?: HandleStyles;

                                                                                                                          property resizeHandleWrapperClass

                                                                                                                          resizeHandleWrapperClass?: string;

                                                                                                                            property resizeHandleWrapperStyle

                                                                                                                            resizeHandleWrapperStyle?: React.CSSProperties;

                                                                                                                              property scale

                                                                                                                              scale?: number;

                                                                                                                                property size

                                                                                                                                size?: Size;

                                                                                                                                  property style

                                                                                                                                  style?: React.CSSProperties;

                                                                                                                                    index signature

                                                                                                                                    [key: string]: any;

                                                                                                                                      Type Aliases

                                                                                                                                      type DraggableData

                                                                                                                                      type DraggableData = {
                                                                                                                                      node: HTMLElement;
                                                                                                                                      deltaX: number;
                                                                                                                                      deltaY: number;
                                                                                                                                      lastX: number;
                                                                                                                                      lastY: number;
                                                                                                                                      } & Position;

                                                                                                                                        type Grid

                                                                                                                                        type Grid = [number, number];

                                                                                                                                          type HandleClasses

                                                                                                                                          type HandleClasses = {
                                                                                                                                          bottom?: string;
                                                                                                                                          bottomLeft?: string;
                                                                                                                                          bottomRight?: string;
                                                                                                                                          left?: string;
                                                                                                                                          right?: string;
                                                                                                                                          top?: string;
                                                                                                                                          topLeft?: string;
                                                                                                                                          topRight?: string;
                                                                                                                                          };

                                                                                                                                            type HandleComponent

                                                                                                                                            type HandleComponent = {
                                                                                                                                            top?: React.ReactElement<any>;
                                                                                                                                            right?: React.ReactElement<any>;
                                                                                                                                            bottom?: React.ReactElement<any>;
                                                                                                                                            left?: React.ReactElement<any>;
                                                                                                                                            topRight?: React.ReactElement<any>;
                                                                                                                                            bottomRight?: React.ReactElement<any>;
                                                                                                                                            bottomLeft?: React.ReactElement<any>;
                                                                                                                                            topLeft?: React.ReactElement<any>;
                                                                                                                                            };

                                                                                                                                              type HandleStyles

                                                                                                                                              type HandleStyles = {
                                                                                                                                              bottom?: React.CSSProperties;
                                                                                                                                              bottomLeft?: React.CSSProperties;
                                                                                                                                              bottomRight?: React.CSSProperties;
                                                                                                                                              left?: React.CSSProperties;
                                                                                                                                              right?: React.CSSProperties;
                                                                                                                                              top?: React.CSSProperties;
                                                                                                                                              topLeft?: React.CSSProperties;
                                                                                                                                              topRight?: React.CSSProperties;
                                                                                                                                              };

                                                                                                                                                type Position

                                                                                                                                                type Position = {
                                                                                                                                                x: number;
                                                                                                                                                y: number;
                                                                                                                                                };

                                                                                                                                                  type ResizableDelta

                                                                                                                                                  type ResizableDelta = {
                                                                                                                                                  width: number;
                                                                                                                                                  height: number;
                                                                                                                                                  };

                                                                                                                                                    type ResizeEnable

                                                                                                                                                    type ResizeEnable =
                                                                                                                                                    | {
                                                                                                                                                    bottom?: boolean;
                                                                                                                                                    bottomLeft?: boolean;
                                                                                                                                                    bottomRight?: boolean;
                                                                                                                                                    left?: boolean;
                                                                                                                                                    right?: boolean;
                                                                                                                                                    top?: boolean;
                                                                                                                                                    topLeft?: boolean;
                                                                                                                                                    topRight?: boolean;
                                                                                                                                                    }
                                                                                                                                                    | boolean;

                                                                                                                                                      type RndDragCallback

                                                                                                                                                      type RndDragCallback = DraggableEventHandler;

                                                                                                                                                        type RndDragEvent

                                                                                                                                                        type RndDragEvent =
                                                                                                                                                        | React.MouseEvent<HTMLElement | SVGElement>
                                                                                                                                                        | React.TouchEvent<HTMLElement | SVGElement>
                                                                                                                                                        | MouseEvent
                                                                                                                                                        | TouchEvent;

                                                                                                                                                          type RndResizeCallback

                                                                                                                                                          type RndResizeCallback = (
                                                                                                                                                          e: MouseEvent | TouchEvent,
                                                                                                                                                          dir: ResizeDirection,
                                                                                                                                                          elementRef: HTMLElement,
                                                                                                                                                          delta: ResizableDelta,
                                                                                                                                                          position: Position
                                                                                                                                                          ) => void;

                                                                                                                                                            type RndResizeStartCallback

                                                                                                                                                            type RndResizeStartCallback = (
                                                                                                                                                            e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
                                                                                                                                                            dir: ResizeDirection,
                                                                                                                                                            elementRef: HTMLElement
                                                                                                                                                            ) => void | boolean;

                                                                                                                                                              Package Files (1)

                                                                                                                                                              Dependencies (3)

                                                                                                                                                              Dev Dependencies (50)

                                                                                                                                                              Peer Dependencies (2)

                                                                                                                                                              Badge

                                                                                                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-rnd.

                                                                                                                                                              • Markdown
                                                                                                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-rnd)
                                                                                                                                                              • HTML
                                                                                                                                                                <a href="https://www.jsdocs.io/package/react-rnd"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>