UNPKG

2.98 kBMarkdownView Raw
1# Installation
2> `npm install --save @types/react-resizable`
3
4# Summary
5This package contains type definitions for react-resizable (https://github.com/react-grid-layout/react-resizable).
6
7# Details
8Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-resizable.
9## [index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-resizable/index.d.ts)
10````ts
11// Type definitions for react-resizable 3.0
12// Project: https://github.com/react-grid-layout/react-resizable
13// Definitions by: Harry Brrundage <https://github.com/airhorns>
14// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
15// TypeScript Version: 2.8
16
17import * as React from 'react';
18
19export type Axis = 'both' | 'x' | 'y' | 'none';
20export type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
21
22export interface ResizableState {
23 resizing: boolean;
24 width: number;
25 height: number;
26 slackW: number;
27 slackH: number;
28}
29
30export interface DragCallbackData {
31 node: HTMLElement;
32 x: number;
33 y: number;
34 deltaX: number;
35 deltaY: number;
36 lastX: number;
37 lastY: number;
38}
39
40export interface ResizeCallbackData {
41 node: HTMLElement;
42 size: { width: number; height: number };
43 handle: ResizeHandle;
44}
45
46export type ResizableProps = {
47 children?: React.ReactNode;
48 className?: string | undefined;
49 handle?: React.ReactNode | ((resizeHandle: ResizeHandle, ref: React.RefObject<any>) => React.ReactNode) | undefined;
50 handleSize?: [number, number] | undefined;
51 lockAspectRatio?: boolean | undefined;
52 minConstraints?: [number, number] | undefined;
53 maxConstraints?: [number, number] | undefined;
54 onResizeStop?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
55 onResizeStart?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
56 onResize?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
57 draggableOpts?: any;
58 resizeHandles?: ResizeHandle[] | undefined;
59 transformScale?: number;
60} & (
61 | {
62 width: number;
63 height?: number | undefined;
64 axis: 'x';
65 }
66 | {
67 width?: number | undefined;
68 height: number;
69 axis: 'y';
70 }
71 | {
72 width: number;
73 height: number;
74 axis?: 'both';
75 }
76);
77
78export class Resizable extends React.Component<ResizableProps, ResizableState> {}
79
80export interface ResizableBoxState {
81 height: number;
82 width: number;
83}
84
85export type ResizableBoxProps = ResizableProps;
86
87export class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {}
88
89````
90
91### Additional Details
92 * Last updated: Sat, 16 Jul 2022 13:32:19 GMT
93 * Dependencies: [@types/react](https://npmjs.com/package/@types/react)
94 * Global values: none
95
96# Credits
97These definitions were written by [Harry Brrundage](https://github.com/airhorns).
98
\No newline at end of file