react-resizable
Version:
A component that is resizable with handles.
56 lines (55 loc) • 1.77 kB
TypeScript
import type * as React from 'react';
import type { DraggableCore } from 'react-draggable';
export type ReactRef<T extends HTMLElement> = {
current: T | null;
};
export type Axis = 'both' | 'x' | 'y' | 'none';
export type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
export type ResizableState = {};
export type ResizableBoxState = {
width: number;
height: number;
propsWidth: number;
propsHeight: number;
};
export type DragCallbackData = {
node: HTMLElement;
x: number;
y: number;
deltaX: number;
deltaY: number;
lastX: number;
lastY: number;
};
export type ResizeCallbackData = {
node: HTMLElement;
size: {
width: number;
height: number;
};
handle: ResizeHandleAxis;
};
export type DefaultProps = {
axis: Axis;
handleSize: [number, number];
lockAspectRatio: boolean;
minConstraints: [number, number];
maxConstraints: [number, number];
resizeHandles: ResizeHandleAxis[];
transformScale: number;
};
export type ResizeHandleFn = (resizeHandleAxis: ResizeHandleAxis, ref: React.RefObject<HTMLElement>) => React.ReactElement<any>;
export type Props = DefaultProps & {
children: React.ReactElement<any>;
className?: string | null;
draggableOpts?: Partial<React.ComponentProps<typeof DraggableCore>> | null;
height: number;
handle?: React.ReactElement<any> | ResizeHandleFn;
onResizeStop?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
onResizeStart?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
onResize?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
width: number;
};
export declare const resizableProps: {
[key: string]: any;
};