re-resizable

  • Version 6.10.3
  • Published
  • 140 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 React.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 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;

                                                                            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>