re-resizable

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

Install

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

Overview

Resizable component for React.

Index

Classes

class Resizable

class Resizable extends PureComponent<ResizableProps, State> {}

    constructor

    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[];
        gridGap: number[];
        lockAspectRatio: boolean;
        lockAspectRatioExtraWidth: number;
        lockAspectRatioExtraHeight: number;
        scale: number;
        resizeRatio: number;
        snapGap: number;
        };

          property delta

          delta: { width: number; height: 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: () => any;

                                                                      method renderResizer

                                                                      renderResizer: () => import('react/jsx-runtime').JSX.Element | null;

                                                                        method setBoundingClientRect

                                                                        setBoundingClientRect: () => void;

                                                                          method unbindEvents

                                                                          unbindEvents: () => void;

                                                                            method updateSize

                                                                            updateSize: (size: Size) => void;

                                                                              Interfaces

                                                                              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 gridGap

                                                                                                                                                                              gridGap?: [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;

                                                                                                                                                                                                                                      Namespaces

                                                                                                                                                                                                                                      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)

                                                                                                                                                                                                                                              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/re-resizable.

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