• Version 6.9.17
  • Published
  • 139 kB
  • No dependencies
  • MIT license


npm i re-resizable
yarn add re-resizable
pnpm add re-resizable


Resizable component for React.



class Resizable

class Resizable extends React.PureComponent<ResizableProps, State> {}


    constructor(props: ResizableProps);

      property appendBase

      appendBase: () => HTMLDivElement | null;

        property defaultProps

        static defaultProps: {
        as: string;
        onResizeStart: () => void;
        onResize: () => void;
        onResizeStop: () => void;
        enable: {
        top: boolean;
        right: boolean;
        bottom: boolean;
        left: boolean;
        topRight: boolean;
        bottomRight: boolean;
        bottomLeft: boolean;
        topLeft: boolean;
        style: {};
        grid: number[];
        lockAspectRatio: boolean;
        lockAspectRatioExtraWidth: number;
        lockAspectRatioExtraHeight: number;
        scale: number;
        resizeRatio: number;
        snapGap: number;

          property flexDir

          flexDir?: 'row' | 'column';

            property parentLeft

            parentLeft: number;

              property parentNode

              readonly parentNode: HTMLElement;

                property parentTop

                parentTop: number;

                  property propsSize

                  readonly propsSize: Size;

                    property ratio

                    ratio: number;

                      property removeBase

                      removeBase: (base: HTMLElement) => void;

                        property resizable

                        resizable: HTMLElement;

                          property resizableBottom

                          resizableBottom: number;

                            property resizableLeft

                            resizableLeft: number;

                              property resizableRight

                              resizableRight: number;

                                property resizableTop

                                resizableTop: number;

                                  property size

                                  readonly size: NumberSize;

                                    property sizeStyle

                                    readonly sizeStyle: { width: string; height: string };

                                      property targetLeft

                                      targetLeft: number;

                                        property targetTop

                                        targetTop: number;

                                          property window

                                          readonly window: Window;

                                            method bindEvents

                                            bindEvents: () => void;

                                              method calculateNewMaxFromBoundary

                                              calculateNewMaxFromBoundary: (
                                              maxWidth?: number,
                                              maxHeight?: number
                                              ) => { maxWidth: number | undefined; maxHeight: number | undefined };

                                                method calculateNewSizeFromAspectRatio

                                                calculateNewSizeFromAspectRatio: (
                                                newWidth: number,
                                                newHeight: number,
                                                max: { width?: number; height?: number },
                                                min: { width?: number; height?: number }
                                                ) => { newWidth: number; newHeight: number };

                                                  method calculateNewSizeFromDirection

                                                  calculateNewSizeFromDirection: (
                                                  clientX: number,
                                                  clientY: number
                                                  ) => { newWidth: number; newHeight: number };

                                                    method componentDidMount

                                                    componentDidMount: () => void;

                                                      method componentWillUnmount

                                                      componentWillUnmount: () => void;

                                                        method createSizeForCssProperty

                                                        createSizeForCssProperty: (
                                                        newSize: number | string,
                                                        kind: 'width' | 'height'
                                                        ) => number | string;

                                                          method getParentSize

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

                                                            method onMouseMove

                                                            onMouseMove: (event: MouseEvent | TouchEvent) => void;

                                                              method onMouseUp

                                                              onMouseUp: (event: MouseEvent | TouchEvent) => void;

                                                                method onResizeStart

                                                                onResizeStart: (
                                                                event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
                                                                direction: Direction
                                                                ) => void;

                                                                  method render

                                                                  render: () => JSX.Element;

                                                                    method renderResizer

                                                                    renderResizer: () => JSX.Element | null;

                                                                      method setBoundingClientRect

                                                                      setBoundingClientRect: () => void;

                                                                        method unbindEvents

                                                                        unbindEvents: () => void;

                                                                          method updateSize

                                                                          updateSize: (size: Size) => void;


                                                                            interface Enable

                                                                            interface Enable {}

                                                                              property bottom

                                                                              bottom?: boolean;

                                                                                property bottomLeft

                                                                                bottomLeft?: boolean;

                                                                                  property bottomRight

                                                                                  bottomRight?: boolean;

                                                                                    property left

                                                                                    left?: boolean;

                                                                                      property right

                                                                                      right?: boolean;

                                                                                        property top

                                                                                        top?: boolean;

                                                                                          property topLeft

                                                                                          topLeft?: boolean;

                                                                                            property topRight

                                                                                            topRight?: boolean;

                                                                                              interface HandleClassName

                                                                                              interface HandleClassName {}

                                                                                                property bottom

                                                                                                bottom?: string;

                                                                                                  property bottomLeft

                                                                                                  bottomLeft?: string;

                                                                                                    property bottomRight

                                                                                                    bottomRight?: string;

                                                                                                      property left

                                                                                                      left?: string;

                                                                                                        property right

                                                                                                        right?: string;

                                                                                                          property top

                                                                                                          top?: string;

                                                                                                            property topLeft

                                                                                                            topLeft?: string;

                                                                                                              property topRight

                                                                                                              topRight?: string;

                                                                                                                interface HandleComponent

                                                                                                                interface HandleComponent {}

                                                                                                                  property bottom

                                                                                                                  bottom?: React.ReactElement<any>;

                                                                                                                    property bottomLeft

                                                                                                                    bottomLeft?: React.ReactElement<any>;

                                                                                                                      property bottomRight

                                                                                                                      bottomRight?: React.ReactElement<any>;

                                                                                                                        property left

                                                                                                                        left?: React.ReactElement<any>;

                                                                                                                          property right

                                                                                                                          right?: React.ReactElement<any>;

                                                                                                                            property top

                                                                                                                            top?: React.ReactElement<any>;

                                                                                                                              property topLeft

                                                                                                                              topLeft?: React.ReactElement<any>;

                                                                                                                                property topRight

                                                                                                                                topRight?: React.ReactElement<any>;

                                                                                                                                  interface HandleStyles

                                                                                                                                  interface HandleStyles {}

                                                                                                                                    property bottom

                                                                                                                                    bottom?: React.CSSProperties;

                                                                                                                                      property bottomLeft

                                                                                                                                      bottomLeft?: React.CSSProperties;

                                                                                                                                        property bottomRight

                                                                                                                                        bottomRight?: React.CSSProperties;

                                                                                                                                          property left

                                                                                                                                          left?: React.CSSProperties;

                                                                                                                                            property right

                                                                                                                                            right?: React.CSSProperties;

                                                                                                                                              property top

                                                                                                                                              top?: React.CSSProperties;

                                                                                                                                                property topLeft

                                                                                                                                                topLeft?: React.CSSProperties;

                                                                                                                                                  property topRight

                                                                                                                                                  topRight?: React.CSSProperties;

                                                                                                                                                    interface NumberSize

                                                                                                                                                    interface NumberSize {}

                                                                                                                                                      property height

                                                                                                                                                      height: number;

                                                                                                                                                        property width

                                                                                                                                                        width: number;

                                                                                                                                                          interface ResizableProps

                                                                                                                                                          interface ResizableProps {}

                                                                                                                                                            property as

                                                                                                                                                            as?: string | React.ComponentType<any>;

                                                                                                                                                              property bounds

                                                                                                                                                              bounds?: 'parent' | 'window' | HTMLElement;

                                                                                                                                                                property boundsByDirection

                                                                                                                                                                boundsByDirection?: boolean;

                                                                                                                                                                  property children

                                                                                                                                                                  children?: React.ReactNode;

                                                                                                                                                                    property className

                                                                                                                                                                    className?: string;

                                                                                                                                                                      property defaultSize

                                                                                                                                                                      defaultSize?: Size;

                                                                                                                                                                        property enable

                                                                                                                                                                        enable?: Enable | false;

                                                                                                                                                                          property grid

                                                                                                                                                                          grid?: [number, number];

                                                                                                                                                                            property handleClasses

                                                                                                                                                                            handleClasses?: HandleClassName;

                                                                                                                                                                              property handleComponent

                                                                                                                                                                              handleComponent?: HandleComponent;

                                                                                                                                                                                property handleStyles

                                                                                                                                                                                handleStyles?: HandleStyles;

                                                                                                                                                                                  property handleWrapperClass

                                                                                                                                                                                  handleWrapperClass?: string;

                                                                                                                                                                                    property handleWrapperStyle

                                                                                                                                                                                    handleWrapperStyle?: React.CSSProperties;

                                                                                                                                                                                      property lockAspectRatio

                                                                                                                                                                                      lockAspectRatio?: boolean | number;

                                                                                                                                                                                        property lockAspectRatioExtraHeight

                                                                                                                                                                                        lockAspectRatioExtraHeight?: number;

                                                                                                                                                                                          property lockAspectRatioExtraWidth

                                                                                                                                                                                          lockAspectRatioExtraWidth?: number;

                                                                                                                                                                                            property maxHeight

                                                                                                                                                                                            maxHeight?: string | number;

                                                                                                                                                                                              property maxWidth

                                                                                                                                                                                              maxWidth?: string | number;

                                                                                                                                                                                                property minHeight

                                                                                                                                                                                                minHeight?: string | number;

                                                                                                                                                                                                  property minWidth

                                                                                                                                                                                                  minWidth?: string | number;

                                                                                                                                                                                                    property onResize

                                                                                                                                                                                                    onResize?: ResizeCallback;

                                                                                                                                                                                                      property onResizeStart

                                                                                                                                                                                                      onResizeStart?: ResizeStartCallback;

                                                                                                                                                                                                        property onResizeStop

                                                                                                                                                                                                        onResizeStop?: ResizeCallback;

                                                                                                                                                                                                          property resizeRatio

                                                                                                                                                                                                          resizeRatio?: number | [number, number];

                                                                                                                                                                                                            property scale

                                                                                                                                                                                                            scale?: number;

                                                                                                                                                                                                              property size

                                                                                                                                                                                                              size?: Size;

                                                                                                                                                                                                                property snap

                                                                                                                                                                                                                snap?: {
                                                                                                                                                                                                                x?: number[];
                                                                                                                                                                                                                y?: number[];

                                                                                                                                                                                                                  property snapGap

                                                                                                                                                                                                                  snapGap?: number;

                                                                                                                                                                                                                    property style

                                                                                                                                                                                                                    style?: React.CSSProperties;

                                                                                                                                                                                                                      interface Size

                                                                                                                                                                                                                      interface Size {}

                                                                                                                                                                                                                        property height

                                                                                                                                                                                                                        height?: string | number;

                                                                                                                                                                                                                          property width

                                                                                                                                                                                                                          width?: string | number;

                                                                                                                                                                                                                            Type Aliases

                                                                                                                                                                                                                            type ResizeCallback

                                                                                                                                                                                                                            type ResizeCallback = (
                                                                                                                                                                                                                            event: MouseEvent | TouchEvent,
                                                                                                                                                                                                                            direction: Direction,
                                                                                                                                                                                                                            elementRef: HTMLElement,
                                                                                                                                                                                                                            delta: NumberSize
                                                                                                                                                                                                                            ) => void;

                                                                                                                                                                                                                              type ResizeDirection

                                                                                                                                                                                                                              type ResizeDirection = Direction;

                                                                                                                                                                                                                                type ResizeStartCallback

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


                                                                                                                                                                                                                                  namespace global

                                                                                                                                                                                                                                  namespace global {}

                                                                                                                                                                                                                                    interface Window

                                                                                                                                                                                                                                    interface Window {}

                                                                                                                                                                                                                                      property MouseEvent

                                                                                                                                                                                                                                      MouseEvent: typeof MouseEvent;

                                                                                                                                                                                                                                        property TouchEvent

                                                                                                                                                                                                                                        TouchEvent: typeof TouchEvent;

                                                                                                                                                                                                                                          Package Files (1)

                                                                                                                                                                                                                                          Dependencies (0)

                                                                                                                                                                                                                                          No dependencies.

                                                                                                                                                                                                                                          Dev Dependencies (51)

                                                                                                                                                                                                                                          Peer Dependencies (2)


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

                                                                                                                                                                                                                                          You may also use to create a custom badge linking to

                                                                                                                                                                                                                                          • Markdown
                                                                                                                                                                                                                                          • HTML
                                                                                                                                                                                                                                            <a href=""><img src="" alt=""></a>