1 | # Installation
|
2 | > `npm install --save @types/react-resizable`
|
3 |
|
4 | # Summary
|
5 | This package contains type definitions for react-resizable (https://github.com/react-grid-layout/react-resizable).
|
6 |
|
7 | # Details
|
8 | Files 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 |
|
17 | import * as React from 'react';
|
18 |
|
19 | export type Axis = 'both' | 'x' | 'y' | 'none';
|
20 | export type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
|
21 |
|
22 | export interface ResizableState {
|
23 | resizing: boolean;
|
24 | width: number;
|
25 | height: number;
|
26 | slackW: number;
|
27 | slackH: number;
|
28 | }
|
29 |
|
30 | export 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 |
|
40 | export interface ResizeCallbackData {
|
41 | node: HTMLElement;
|
42 | size: { width: number; height: number };
|
43 | handle: ResizeHandle;
|
44 | }
|
45 |
|
46 | export 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 |
|
78 | export class Resizable extends React.Component<ResizableProps, ResizableState> {}
|
79 |
|
80 | export interface ResizableBoxState {
|
81 | height: number;
|
82 | width: number;
|
83 | }
|
84 |
|
85 | export type ResizableBoxProps = ResizableProps;
|
86 |
|
87 | export 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
|
97 | These definitions were written by [Harry Brrundage](https://github.com/airhorns).
|
98 |
|
\ | No newline at end of file |