@types/react-resizable

Installation

npm install --save @types/react-resizable

Summary

This package contains type definitions for react-resizable (https://github.com/STRML/react-resizable).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-resizable.

index.d.ts

// Type definitions for react-resizable 3.0
// Project: https://github.com/STRML/react-resizable
// Definitions by: Harry Brrundage <https://github.com/airhorns>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

import * as React from "react";

export type Axis = "both" | "x" | "y" | "none";
export type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

export interface ResizableState {
    resizing: boolean;
    width: number;
    height: number;
    slackW: number;
    slackH: number;
}

export interface DragCallbackData {
    node: HTMLElement;
    x: number;
    y: number;
    deltaX: number;
    deltaY: number;
    lastX: number;
    lastY: number;
}

export interface ResizeCallbackData {
    node: HTMLElement;
    size: { width: number; height: number };
    handle: ResizeHandle;
}

export interface ResizableProps {
    children?: React.ReactNode;
    className?: string | undefined;
    width: number;
    height: number;
    handle?: React.ReactNode | ((resizeHandle: ResizeHandle, ref: React.RefObject<any>) => React.ReactNode) | undefined;
    handleSize?: [number, number] | undefined;
    lockAspectRatio?: boolean | undefined;
    axis?: Axis | undefined;
    minConstraints?: [number, number] | undefined;
    maxConstraints?: [number, number] | undefined;
    onResizeStop?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
    onResizeStart?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
    onResize?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
    draggableOpts?: any;
    resizeHandles?: ResizeHandle[] | undefined;
}

export class Resizable extends React.Component<
    ResizableProps,
    ResizableState
    > { }

export interface ResizableBoxState {
    height: number;
    width: number;
}

export type ResizableBoxProps = ResizableProps;

export class ResizableBox extends React.Component<
    ResizableBoxProps,
    ResizableBoxState
    > { }

Additional Details

• Last updated: Wed, 18 May 2022 13:31:33 GMT
• Dependencies: @types/react
• Global values: none

Credits

These definitions were written by Harry Brrundage.