@types/react 18.2.52 → 18.2.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- react/README.md +1 -1
- react/package.json +2 -2
- react/ts5.0/index.d.ts +750 -89
react/README.md
CHANGED
@@ -8,7 +8,7 @@ This package contains type definitions for react (https://react.dev/).
|
|
8
8
|
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react.
|
9
9
|
|
10
10
|
### Additional Details
|
11
|
-
* Last updated:
|
11
|
+
* Last updated: Mon, 05 Feb 2024 04:07:15 GMT
|
12
12
|
* Dependencies: [@types/prop-types](https://npmjs.com/package/@types/prop-types), [@types/scheduler](https://npmjs.com/package/@types/scheduler), [csstype](https://npmjs.com/package/csstype)
|
13
13
|
|
14
14
|
# Credits
|
react/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@types/react",
|
3
|
-
"version": "18.2.
|
3
|
+
"version": "18.2.53",
|
4
4
|
"description": "TypeScript definitions for react",
|
5
5
|
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
|
6
6
|
"license": "MIT",
|
@@ -201,6 +201,6 @@
|
|
201
201
|
"@types/scheduler": "*",
|
202
202
|
"csstype": "^3.0.2"
|
203
203
|
},
|
204
|
-
"typesPublisherContentHash": "
|
204
|
+
"typesPublisherContentHash": "792d7aa40aaa749ea92edb60082cf00457f171be9a223df0e937cb8fd288816b",
|
205
205
|
"typeScriptVersion": "4.6"
|
206
206
|
}
|
react/ts5.0/index.d.ts
CHANGED
@@ -20,11 +20,26 @@ type NativePointerEvent = PointerEvent;
|
|
20
20
|
type NativeTransitionEvent = TransitionEvent;
|
21
21
|
type NativeUIEvent = UIEvent;
|
22
22
|
type NativeWheelEvent = WheelEvent;
|
23
|
+
|
24
|
+
/**
|
25
|
+
* Used to represent DOM API's where users can either pass
|
26
|
+
* true or false as a boolean or as its equivalent strings.
|
27
|
+
*/
|
23
28
|
type Booleanish = boolean | "true" | "false";
|
29
|
+
|
30
|
+
/**
|
31
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}
|
32
|
+
*/
|
24
33
|
type CrossOrigin = "anonymous" | "use-credentials" | "" | undefined;
|
25
34
|
|
26
35
|
declare const UNDEFINED_VOID_ONLY: unique symbol;
|
27
|
-
|
36
|
+
|
37
|
+
/**
|
38
|
+
* The function returned from an effect passed to {@link React.useEffect useEffect},
|
39
|
+
* which can be used to clean up the effect when the component unmounts.
|
40
|
+
*
|
41
|
+
* @see {@link https://react.dev/reference/react/useEffect React Docs}
|
42
|
+
*/
|
28
43
|
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
|
29
44
|
type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
|
30
45
|
|
@@ -37,35 +52,128 @@ declare namespace React {
|
|
37
52
|
// React Elements
|
38
53
|
// ----------------------------------------------------------------------
|
39
54
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
55
|
+
/**
|
56
|
+
* Used to retrieve the possible components which accept a given set of props.
|
57
|
+
*
|
58
|
+
* Can be passed no type parameters to get a union of all possible components
|
59
|
+
* and tags.
|
60
|
+
*
|
61
|
+
* Is a superset of {@link ComponentType}.
|
62
|
+
*
|
63
|
+
* @template P The props to match against. If not passed, defaults to any.
|
64
|
+
* @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.
|
65
|
+
*
|
66
|
+
* @example
|
67
|
+
*
|
68
|
+
* ```tsx
|
69
|
+
* // All components and tags (img, embed etc.)
|
70
|
+
* // which accept `src`
|
71
|
+
* type SrcComponents = ElementType<{ src: any }>;
|
72
|
+
* ```
|
73
|
+
*
|
74
|
+
* @example
|
75
|
+
*
|
76
|
+
* ```tsx
|
77
|
+
* // All components
|
78
|
+
* type AllComponents = ElementType;
|
79
|
+
* ```
|
80
|
+
*
|
81
|
+
* @example
|
82
|
+
*
|
83
|
+
* ```tsx
|
84
|
+
* // All custom components which match `src`, and tags which
|
85
|
+
* // match `src`, narrowed down to just `audio` and `embed`
|
86
|
+
* type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;
|
87
|
+
* ```
|
88
|
+
*/
|
89
|
+
type ElementType<P = any, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> =
|
90
|
+
| { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]
|
44
91
|
| ComponentType<P>;
|
92
|
+
|
93
|
+
/**
|
94
|
+
* Represents any user-defined component, either as a function component or
|
95
|
+
* a class component.
|
96
|
+
*
|
97
|
+
* @template P The props the component accepts.
|
98
|
+
*
|
99
|
+
* @see {@link ComponentClass}
|
100
|
+
* @see {@link FunctionComponent}
|
101
|
+
*/
|
45
102
|
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
46
103
|
|
47
104
|
type JSXElementConstructor<P> =
|
48
105
|
| ((
|
49
106
|
props: P,
|
50
107
|
/**
|
51
|
-
* @deprecated
|
108
|
+
* @deprecated
|
109
|
+
*
|
110
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components React Docs}
|
52
111
|
*/
|
53
112
|
deprecatedLegacyContext?: any,
|
54
113
|
) => ReactElement<any, any> | null)
|
55
114
|
| (new(
|
56
115
|
props: P,
|
57
116
|
/**
|
58
|
-
* @deprecated
|
117
|
+
* @deprecated
|
118
|
+
*
|
119
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}
|
59
120
|
*/
|
60
121
|
deprecatedLegacyContext?: any,
|
61
122
|
) => Component<any, any>);
|
62
123
|
|
124
|
+
/**
|
125
|
+
* A readonly ref container where {@link current} cannot be mutated.
|
126
|
+
*
|
127
|
+
* Created by {@link createRef}, or {@link useRef} when passed `null`.
|
128
|
+
*
|
129
|
+
* @template T The type of the ref's value.
|
130
|
+
*
|
131
|
+
* @example
|
132
|
+
*
|
133
|
+
* ```tsx
|
134
|
+
* const ref = createRef<HTMLDivElement>();
|
135
|
+
*
|
136
|
+
* ref.current = document.createElement('div'); // Error
|
137
|
+
* ```
|
138
|
+
*/
|
63
139
|
interface RefObject<T> {
|
64
140
|
readonly current: T | null;
|
65
141
|
}
|
66
|
-
|
142
|
+
|
143
|
+
/**
|
144
|
+
* A callback fired whenever the ref's value changes.
|
145
|
+
*
|
146
|
+
* @template T The type of the ref's value.
|
147
|
+
*
|
148
|
+
* @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}
|
149
|
+
*
|
150
|
+
* @example
|
151
|
+
*
|
152
|
+
* ```tsx
|
153
|
+
* <div ref={(node) => console.log(node)} />
|
154
|
+
* ```
|
155
|
+
*/
|
67
156
|
type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];
|
157
|
+
|
158
|
+
/**
|
159
|
+
* A union type of all possible shapes for React refs.
|
160
|
+
*
|
161
|
+
* @see {@link RefCallback}
|
162
|
+
* @see {@link RefObject}
|
163
|
+
*/
|
164
|
+
|
68
165
|
type Ref<T> = RefCallback<T> | RefObject<T> | null;
|
166
|
+
/**
|
167
|
+
* A legacy implementation of refs where you can pass a string to a ref prop.
|
168
|
+
*
|
169
|
+
* @see {@link https://react.dev/reference/react/Component#refs React Docs}
|
170
|
+
*
|
171
|
+
* @example
|
172
|
+
*
|
173
|
+
* ```tsx
|
174
|
+
* <div ref="myRef" />
|
175
|
+
* ```
|
176
|
+
*/
|
69
177
|
type LegacyRef<T> = string | Ref<T>;
|
70
178
|
/**
|
71
179
|
* Gets the instance type for a React element. The instance will be different for various component types:
|
@@ -101,6 +209,11 @@ declare namespace React {
|
|
101
209
|
|
102
210
|
type ComponentState = any;
|
103
211
|
|
212
|
+
/**
|
213
|
+
* A value which uniquely identifies a node among items in an array.
|
214
|
+
*
|
215
|
+
* @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}
|
216
|
+
*/
|
104
217
|
type Key = string | number | bigint;
|
105
218
|
|
106
219
|
/**
|
@@ -114,7 +227,7 @@ declare namespace React {
|
|
114
227
|
/**
|
115
228
|
* Allows getting a ref to the component instance.
|
116
229
|
* Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
|
117
|
-
* @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
|
230
|
+
* @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom}
|
118
231
|
*/
|
119
232
|
ref?: Ref<T> | undefined;
|
120
233
|
}
|
@@ -122,7 +235,7 @@ declare namespace React {
|
|
122
235
|
/**
|
123
236
|
* Allows getting a ref to the component instance.
|
124
237
|
* Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
|
125
|
-
* @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
|
238
|
+
* @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom}
|
126
239
|
*/
|
127
240
|
ref?: LegacyRef<T> | undefined;
|
128
241
|
}
|
@@ -150,6 +263,9 @@ declare namespace React {
|
|
150
263
|
ref?: LegacyRef<T> | undefined;
|
151
264
|
}
|
152
265
|
|
266
|
+
/**
|
267
|
+
* @deprecated Use `ComponentElement<P, ClassicComponent<P, any>>` instead.
|
268
|
+
*/
|
153
269
|
type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
|
154
270
|
|
155
271
|
// string fallback for custom web-components
|
@@ -272,9 +388,6 @@ declare namespace React {
|
|
272
388
|
|
273
389
|
// Custom components
|
274
390
|
function createFactory<P>(type: FunctionComponent<P>): FunctionComponentFactory<P>;
|
275
|
-
function createFactory<P>(
|
276
|
-
type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
|
277
|
-
): CFactory<P, ClassicComponent<P, ComponentState>>;
|
278
391
|
function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
|
279
392
|
type: ClassType<P, T, C>,
|
280
393
|
): CFactory<P, T>;
|
@@ -310,11 +423,6 @@ declare namespace React {
|
|
310
423
|
props?: Attributes & P | null,
|
311
424
|
...children: ReactNode[]
|
312
425
|
): FunctionComponentElement<P>;
|
313
|
-
function createElement<P extends {}>(
|
314
|
-
type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
|
315
|
-
props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null,
|
316
|
-
...children: ReactNode[]
|
317
|
-
): CElement<P, ClassicComponent<P, ComponentState>>;
|
318
426
|
function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
|
319
427
|
type: ClassType<P, T, C>,
|
320
428
|
props?: ClassAttributes<T> & P | null,
|
@@ -379,43 +487,150 @@ declare namespace React {
|
|
379
487
|
children: (value: T) => ReactNode;
|
380
488
|
}
|
381
489
|
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
490
|
+
/**
|
491
|
+
* An object masquerading as a component. These are created by functions
|
492
|
+
* like {@link forwardRef}, {@link memo}, and {@link createContext}.
|
493
|
+
*
|
494
|
+
* In order to make TypeScript work, we pretend that they are normal
|
495
|
+
* components.
|
496
|
+
*
|
497
|
+
* But they are, in fact, not callable - instead, they are objects which
|
498
|
+
* are treated specially by the renderer.
|
499
|
+
*/
|
392
500
|
interface ExoticComponent<P = {}> {
|
393
|
-
/**
|
394
|
-
* **NOTE**: Exotic components are not callable.
|
395
|
-
*/
|
396
501
|
(props: P): ReactElement | null;
|
397
502
|
readonly $$typeof: symbol;
|
398
503
|
}
|
399
504
|
|
505
|
+
/**
|
506
|
+
* An {@link ExoticComponent} with a `displayName` property applied to it.
|
507
|
+
*/
|
400
508
|
interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
|
509
|
+
/**
|
510
|
+
* Used in debugging messages. You might want to set it
|
511
|
+
* explicitly if you want to display a different name for
|
512
|
+
* debugging purposes.
|
513
|
+
*
|
514
|
+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
|
515
|
+
*/
|
401
516
|
displayName?: string | undefined;
|
402
517
|
}
|
403
518
|
|
519
|
+
/**
|
520
|
+
* An {@link ExoticComponent} with a `propTypes` property applied to it.
|
521
|
+
*/
|
404
522
|
interface ProviderExoticComponent<P> extends ExoticComponent<P> {
|
405
523
|
propTypes?: WeakValidationMap<P> | undefined;
|
406
524
|
}
|
407
525
|
|
526
|
+
/**
|
527
|
+
* Used to retrieve the type of a context object from a {@link Context}.
|
528
|
+
*
|
529
|
+
* @example
|
530
|
+
*
|
531
|
+
* ```tsx
|
532
|
+
* import { createContext } from 'react';
|
533
|
+
*
|
534
|
+
* const MyContext = createContext({ foo: 'bar' });
|
535
|
+
*
|
536
|
+
* type ContextType = ContextType<typeof MyContext>;
|
537
|
+
* // ContextType = { foo: string }
|
538
|
+
* ```
|
539
|
+
*/
|
408
540
|
type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;
|
409
541
|
|
410
|
-
|
411
|
-
|
542
|
+
/**
|
543
|
+
* Wraps your components to specify the value of this context for all components inside.
|
544
|
+
*
|
545
|
+
* @see {@link https://react.dev/reference/react/createContext#provider React Docs}
|
546
|
+
*
|
547
|
+
* @example
|
548
|
+
*
|
549
|
+
* ```tsx
|
550
|
+
* import { createContext } from 'react';
|
551
|
+
*
|
552
|
+
* const ThemeContext = createContext('light');
|
553
|
+
*
|
554
|
+
* function App() {
|
555
|
+
* return (
|
556
|
+
* <ThemeContext.Provider value="dark">
|
557
|
+
* <Toolbar />
|
558
|
+
* </ThemeContext.Provider>
|
559
|
+
* );
|
560
|
+
* }
|
561
|
+
* ```
|
562
|
+
*/
|
412
563
|
type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;
|
564
|
+
|
565
|
+
/**
|
566
|
+
* The old way to read context, before {@link useContext} existed.
|
567
|
+
*
|
568
|
+
* @see {@link https://react.dev/reference/react/createContext#consumer React Docs}
|
569
|
+
*
|
570
|
+
* @example
|
571
|
+
*
|
572
|
+
* ```tsx
|
573
|
+
* import { UserContext } from './user-context';
|
574
|
+
*
|
575
|
+
* function Avatar() {
|
576
|
+
* return (
|
577
|
+
* <UserContext.Consumer>
|
578
|
+
* {user => <img src={user.profileImage} alt={user.name} />}
|
579
|
+
* </UserContext.Consumer>
|
580
|
+
* );
|
581
|
+
* }
|
582
|
+
* ```
|
583
|
+
*/
|
413
584
|
type Consumer<T> = ExoticComponent<ConsumerProps<T>>;
|
585
|
+
|
586
|
+
/**
|
587
|
+
* Context lets components pass information deep down without explicitly
|
588
|
+
* passing props.
|
589
|
+
*
|
590
|
+
* Created from {@link createContext}
|
591
|
+
*
|
592
|
+
* @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}
|
593
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
|
594
|
+
*
|
595
|
+
* @example
|
596
|
+
*
|
597
|
+
* ```tsx
|
598
|
+
* import { createContext } from 'react';
|
599
|
+
*
|
600
|
+
* const ThemeContext = createContext('light');
|
601
|
+
* ```
|
602
|
+
*/
|
414
603
|
interface Context<T> {
|
415
604
|
Provider: Provider<T>;
|
416
605
|
Consumer: Consumer<T>;
|
606
|
+
/**
|
607
|
+
* Used in debugging messages. You might want to set it
|
608
|
+
* explicitly if you want to display a different name for
|
609
|
+
* debugging purposes.
|
610
|
+
*
|
611
|
+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
|
612
|
+
*/
|
417
613
|
displayName?: string | undefined;
|
418
614
|
}
|
615
|
+
|
616
|
+
/**
|
617
|
+
* Lets you create a {@link Context} that components can provide or read.
|
618
|
+
*
|
619
|
+
* @param defaultValue The value you want the context to have when there is no matching
|
620
|
+
* {@link Provider} in the tree above the component reading the context. This is meant
|
621
|
+
* as a "last resort" fallback.
|
622
|
+
*
|
623
|
+
* @see {@link https://react.dev/reference/react/createContext#reference React Docs}
|
624
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
|
625
|
+
*
|
626
|
+
* @example
|
627
|
+
*
|
628
|
+
* ```tsx
|
629
|
+
* import { createContext } from 'react';
|
630
|
+
*
|
631
|
+
* const ThemeContext = createContext('light');
|
632
|
+
* ```
|
633
|
+
*/
|
419
634
|
function createContext<T>(
|
420
635
|
// If you thought this should be optional, see
|
421
636
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
|
@@ -435,9 +650,57 @@ declare namespace React {
|
|
435
650
|
only<C>(children: C): C extends any[] ? never : C;
|
436
651
|
toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
|
437
652
|
};
|
653
|
+
/**
|
654
|
+
* Lets you group elements without a wrapper node.
|
655
|
+
*
|
656
|
+
* @see {@link https://react.dev/reference/react/Fragment React Docs}
|
657
|
+
*
|
658
|
+
* @example
|
659
|
+
*
|
660
|
+
* ```tsx
|
661
|
+
* import { Fragment } from 'react';
|
662
|
+
*
|
663
|
+
* <Fragment>
|
664
|
+
* <td>Hello</td>
|
665
|
+
* <td>World</td>
|
666
|
+
* </Fragment>
|
667
|
+
* ```
|
668
|
+
*
|
669
|
+
* @example
|
670
|
+
*
|
671
|
+
* ```tsx
|
672
|
+
* // Using the <></> shorthand syntax:
|
673
|
+
*
|
674
|
+
* <>
|
675
|
+
* <td>Hello</td>
|
676
|
+
* <td>World</td>
|
677
|
+
* </>
|
678
|
+
* ```
|
679
|
+
*/
|
438
680
|
const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;
|
681
|
+
|
682
|
+
/**
|
683
|
+
* Lets you find common bugs in your components early during development.
|
684
|
+
*
|
685
|
+
* @see {@link https://react.dev/reference/react/StrictMode React Docs}
|
686
|
+
*
|
687
|
+
* @example
|
688
|
+
*
|
689
|
+
* ```tsx
|
690
|
+
* import { StrictMode } from 'react';
|
691
|
+
*
|
692
|
+
* <StrictMode>
|
693
|
+
* <App />
|
694
|
+
* </StrictMode>
|
695
|
+
* ```
|
696
|
+
*/
|
439
697
|
const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;
|
440
698
|
|
699
|
+
/**
|
700
|
+
* The props accepted by {@link Suspense}.
|
701
|
+
*
|
702
|
+
* @see {@link https://react.dev/reference/react/Suspense React Docs}
|
703
|
+
*/
|
441
704
|
interface SuspenseProps {
|
442
705
|
children?: ReactNode | undefined;
|
443
706
|
|
@@ -445,27 +708,105 @@ declare namespace React {
|
|
445
708
|
fallback?: ReactNode;
|
446
709
|
}
|
447
710
|
|
711
|
+
/**
|
712
|
+
* Lets you display a fallback until its children have finished loading.
|
713
|
+
*
|
714
|
+
* @see {@link https://react.dev/reference/react/Suspense React Docs}
|
715
|
+
*
|
716
|
+
* @example
|
717
|
+
*
|
718
|
+
* ```tsx
|
719
|
+
* import { Suspense } from 'react';
|
720
|
+
*
|
721
|
+
* <Suspense fallback={<Loading />}>
|
722
|
+
* <ProfileDetails />
|
723
|
+
* </Suspense>
|
724
|
+
* ```
|
725
|
+
*/
|
448
726
|
const Suspense: ExoticComponent<SuspenseProps>;
|
449
727
|
const version: string;
|
450
728
|
|
451
729
|
/**
|
452
|
-
* {@link
|
730
|
+
* The callback passed to {@link ProfilerProps.onRender}.
|
731
|
+
*
|
732
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
453
733
|
*/
|
454
734
|
type ProfilerOnRenderCallback = (
|
735
|
+
/**
|
736
|
+
* The string id prop of the {@link Profiler} tree that has just committed. This lets
|
737
|
+
* you identify which part of the tree was committed if you are using multiple
|
738
|
+
* profilers.
|
739
|
+
*
|
740
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
741
|
+
*/
|
455
742
|
id: string,
|
743
|
+
/**
|
744
|
+
* This lets you know whether the tree has just been mounted for the first time
|
745
|
+
* or re-rendered due to a change in props, state, or hooks.
|
746
|
+
*
|
747
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
748
|
+
*/
|
456
749
|
phase: "mount" | "update" | "nested-update",
|
750
|
+
/**
|
751
|
+
* The number of milliseconds spent rendering the {@link Profiler} and its descendants
|
752
|
+
* for the current update. This indicates how well the subtree makes use of
|
753
|
+
* memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease
|
754
|
+
* significantly after the initial mount as many of the descendants will only need to
|
755
|
+
* re-render if their specific props change.
|
756
|
+
*
|
757
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
758
|
+
*/
|
457
759
|
actualDuration: number,
|
760
|
+
/**
|
761
|
+
* The number of milliseconds estimating how much time it would take to re-render the entire
|
762
|
+
* {@link Profiler} subtree without any optimizations. It is calculated by summing up the most
|
763
|
+
* recent render durations of each component in the tree. This value estimates a worst-case
|
764
|
+
* cost of rendering (e.g. the initial mount or a tree with no memoization). Compare
|
765
|
+
* {@link actualDuration} against it to see if memoization is working.
|
766
|
+
*
|
767
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
768
|
+
*/
|
458
769
|
baseDuration: number,
|
770
|
+
/**
|
771
|
+
* A numeric timestamp for when React began rendering the current update.
|
772
|
+
*
|
773
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
774
|
+
*/
|
459
775
|
startTime: number,
|
776
|
+
/**
|
777
|
+
* A numeric timestamp for when React committed the current update. This value is shared
|
778
|
+
* between all profilers in a commit, enabling them to be grouped if desirable.
|
779
|
+
*
|
780
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
781
|
+
*/
|
460
782
|
commitTime: number,
|
461
783
|
interactions: Set<SchedulerInteraction>,
|
462
784
|
) => void;
|
785
|
+
|
786
|
+
/**
|
787
|
+
* The props accepted by {@link Profiler}.
|
788
|
+
*
|
789
|
+
* @see {@link https://react.dev/reference/react/Profiler React Docs}
|
790
|
+
*/
|
463
791
|
interface ProfilerProps {
|
464
792
|
children?: ReactNode | undefined;
|
465
793
|
id: string;
|
466
794
|
onRender: ProfilerOnRenderCallback;
|
467
795
|
}
|
468
796
|
|
797
|
+
/**
|
798
|
+
* Lets you measure rendering performance of a React tree programmatically.
|
799
|
+
*
|
800
|
+
* @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
|
801
|
+
*
|
802
|
+
* @example
|
803
|
+
*
|
804
|
+
* ```tsx
|
805
|
+
* <Profiler id="App" onRender={onRender}>
|
806
|
+
* <App />
|
807
|
+
* </Profiler>
|
808
|
+
* ```
|
809
|
+
*/
|
469
810
|
const Profiler: ExoticComponent<ProfilerProps>;
|
470
811
|
|
471
812
|
//
|
@@ -496,7 +837,7 @@ declare namespace React {
|
|
496
837
|
* }
|
497
838
|
* ```
|
498
839
|
*
|
499
|
-
* @see https://react.dev/reference/react/Component#static-contexttype
|
840
|
+
* @see {@link https://react.dev/reference/react/Component#static-contexttype}
|
500
841
|
*/
|
501
842
|
static contextType?: Context<any> | undefined;
|
502
843
|
|
@@ -513,14 +854,14 @@ declare namespace React {
|
|
513
854
|
* declare context: React.ContextType<typeof MyContext>
|
514
855
|
* ```
|
515
856
|
*
|
516
|
-
* @see https://react.dev/reference/react/Component#context
|
857
|
+
* @see {@link https://react.dev/reference/react/Component#context}
|
517
858
|
*/
|
518
859
|
context: unknown;
|
519
860
|
|
520
861
|
constructor(props: Readonly<P> | P);
|
521
862
|
/**
|
522
863
|
* @deprecated
|
523
|
-
* @see https://legacy.reactjs.org/docs/legacy-context.html
|
864
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html}
|
524
865
|
*/
|
525
866
|
constructor(props: P, context: any);
|
526
867
|
|
@@ -548,6 +889,12 @@ declare namespace React {
|
|
548
889
|
|
549
890
|
class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}
|
550
891
|
|
892
|
+
/**
|
893
|
+
* @deprecated Use `ClassicComponent` from `create-react-class`
|
894
|
+
*
|
895
|
+
* @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}
|
896
|
+
* @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}
|
897
|
+
*/
|
551
898
|
interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {
|
552
899
|
replaceState(nextState: S, callback?: () => void): void;
|
553
900
|
isMounted(): boolean;
|
@@ -562,23 +909,140 @@ declare namespace React {
|
|
562
909
|
// Class Interfaces
|
563
910
|
// ----------------------------------------------------------------------
|
564
911
|
|
912
|
+
/**
|
913
|
+
* Represents the type of a function component. Can optionally
|
914
|
+
* receive a type argument that represents the props the component
|
915
|
+
* receives.
|
916
|
+
*
|
917
|
+
* @template P The props the component accepts.
|
918
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
|
919
|
+
* @alias for {@link FunctionComponent}
|
920
|
+
*
|
921
|
+
* @example
|
922
|
+
*
|
923
|
+
* ```tsx
|
924
|
+
* // With props:
|
925
|
+
* type Props = { name: string }
|
926
|
+
*
|
927
|
+
* const MyComponent: FC<Props> = (props) => {
|
928
|
+
* return <div>{props.name}</div>
|
929
|
+
* }
|
930
|
+
* ```
|
931
|
+
*
|
932
|
+
* @example
|
933
|
+
*
|
934
|
+
* ```tsx
|
935
|
+
* // Without props:
|
936
|
+
* const MyComponentWithoutProps: FC = () => {
|
937
|
+
* return <div>MyComponentWithoutProps</div>
|
938
|
+
* }
|
939
|
+
* ```
|
940
|
+
*/
|
565
941
|
type FC<P = {}> = FunctionComponent<P>;
|
566
942
|
|
943
|
+
/**
|
944
|
+
* Represents the type of a function component. Can optionally
|
945
|
+
* receive a type argument that represents the props the component
|
946
|
+
* accepts.
|
947
|
+
*
|
948
|
+
* @template P The props the component accepts.
|
949
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
|
950
|
+
*
|
951
|
+
* @example
|
952
|
+
*
|
953
|
+
* ```tsx
|
954
|
+
* // With props:
|
955
|
+
* type Props = { name: string }
|
956
|
+
*
|
957
|
+
* const MyComponent: FunctionComponent<Props> = (props) => {
|
958
|
+
* return <div>{props.name}</div>
|
959
|
+
* }
|
960
|
+
* ```
|
961
|
+
*
|
962
|
+
* @example
|
963
|
+
*
|
964
|
+
* ```tsx
|
965
|
+
* // Without props:
|
966
|
+
* const MyComponentWithoutProps: FunctionComponent = () => {
|
967
|
+
* return <div>MyComponentWithoutProps</div>
|
968
|
+
* }
|
969
|
+
* ```
|
970
|
+
*/
|
567
971
|
interface FunctionComponent<P = {}> {
|
568
972
|
(props: P, context?: any): ReactElement<any, any> | null;
|
973
|
+
/**
|
974
|
+
* Used to declare the types of the props accepted by the
|
975
|
+
* component. These types will be checked during rendering
|
976
|
+
* and in development only.
|
977
|
+
*
|
978
|
+
* We recommend using TypeScript instead of checking prop
|
979
|
+
* types at runtime.
|
980
|
+
*
|
981
|
+
* @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}
|
982
|
+
*/
|
569
983
|
propTypes?: WeakValidationMap<P> | undefined;
|
984
|
+
/**
|
985
|
+
* @deprecated
|
986
|
+
*
|
987
|
+
* Lets you specify which legacy context is consumed by
|
988
|
+
* this component.
|
989
|
+
*
|
990
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}
|
991
|
+
*/
|
570
992
|
contextTypes?: ValidationMap<any> | undefined;
|
993
|
+
/**
|
994
|
+
* Used to define default values for the props accepted by
|
995
|
+
* the component.
|
996
|
+
*
|
997
|
+
* @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}
|
998
|
+
*
|
999
|
+
* @example
|
1000
|
+
*
|
1001
|
+
* ```tsx
|
1002
|
+
* type Props = { name?: string }
|
1003
|
+
*
|
1004
|
+
* const MyComponent: FC<Props> = (props) => {
|
1005
|
+
* return <div>{props.name}</div>
|
1006
|
+
* }
|
1007
|
+
*
|
1008
|
+
* MyComponent.defaultProps = {
|
1009
|
+
* name: 'John Doe'
|
1010
|
+
* }
|
1011
|
+
* ```
|
1012
|
+
*/
|
571
1013
|
defaultProps?: Partial<P> | undefined;
|
1014
|
+
/**
|
1015
|
+
* Used in debugging messages. You might want to set it
|
1016
|
+
* explicitly if you want to display a different name for
|
1017
|
+
* debugging purposes.
|
1018
|
+
*
|
1019
|
+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
|
1020
|
+
*
|
1021
|
+
* @example
|
1022
|
+
*
|
1023
|
+
* ```tsx
|
1024
|
+
*
|
1025
|
+
* const MyComponent: FC = () => {
|
1026
|
+
* return <div>Hello!</div>
|
1027
|
+
* }
|
1028
|
+
*
|
1029
|
+
* MyComponent.displayName = 'MyAwesomeComponent'
|
1030
|
+
* ```
|
1031
|
+
*/
|
572
1032
|
displayName?: string | undefined;
|
573
1033
|
}
|
574
1034
|
|
575
1035
|
/**
|
576
|
-
* @deprecated - Equivalent
|
1036
|
+
* @deprecated - Equivalent to {@link React.FunctionComponent}.
|
1037
|
+
*
|
1038
|
+
* @see {@link React.FunctionComponent}
|
577
1039
|
*/
|
578
1040
|
type VFC<P = {}> = VoidFunctionComponent<P>;
|
579
1041
|
|
580
1042
|
/**
|
581
|
-
* @deprecated - Equivalent
|
1043
|
+
* @deprecated - Equivalent to {@link React.FunctionComponent}.
|
1044
|
+
*
|
1045
|
+
* @see {@link React.FunctionComponent}
|
582
1046
|
*/
|
583
1047
|
interface VoidFunctionComponent<P = {}> {
|
584
1048
|
(props: P, context?: any): ReactElement<any, any> | null;
|
@@ -588,42 +1052,126 @@ declare namespace React {
|
|
588
1052
|
displayName?: string | undefined;
|
589
1053
|
}
|
590
1054
|
|
1055
|
+
/**
|
1056
|
+
* The type of the ref received by a {@link ForwardRefRenderFunction}.
|
1057
|
+
*
|
1058
|
+
* @see {@link ForwardRefRenderFunction}
|
1059
|
+
*/
|
591
1060
|
type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
|
592
1061
|
|
1062
|
+
/**
|
1063
|
+
* The type of the function passed to {@link forwardRef}. This is considered different
|
1064
|
+
* to a normal {@link FunctionComponent} because it receives an additional argument,
|
1065
|
+
*
|
1066
|
+
* @param props Props passed to the component, if any.
|
1067
|
+
* @param ref A ref forwarded to the component of type {@link ForwardedRef}.
|
1068
|
+
*
|
1069
|
+
* @template T The type of the forwarded ref.
|
1070
|
+
* @template P The type of the props the component accepts.
|
1071
|
+
*
|
1072
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
|
1073
|
+
* @see {@link forwardRef}
|
1074
|
+
*/
|
593
1075
|
interface ForwardRefRenderFunction<T, P = {}> {
|
594
1076
|
(props: P, ref: ForwardedRef<T>): ReactElement | null;
|
1077
|
+
/**
|
1078
|
+
* Used in debugging messages. You might want to set it
|
1079
|
+
* explicitly if you want to display a different name for
|
1080
|
+
* debugging purposes.
|
1081
|
+
*
|
1082
|
+
* Will show `ForwardRef(${Component.displayName || Component.name})`
|
1083
|
+
* in devtools by default, but can be given its own specific name.
|
1084
|
+
*
|
1085
|
+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
|
1086
|
+
*/
|
595
1087
|
displayName?: string | undefined;
|
596
|
-
// explicit rejected with `never` required due to
|
597
|
-
// https://github.com/microsoft/TypeScript/issues/36826
|
598
1088
|
/**
|
599
|
-
* defaultProps are not supported on render functions
|
1089
|
+
* defaultProps are not supported on render functions passed to forwardRef.
|
1090
|
+
*
|
1091
|
+
* @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context
|
1092
|
+
* @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}
|
600
1093
|
*/
|
601
1094
|
defaultProps?: never | undefined;
|
602
1095
|
/**
|
603
|
-
* propTypes are not supported on render functions
|
1096
|
+
* propTypes are not supported on render functions passed to forwardRef.
|
1097
|
+
*
|
1098
|
+
* @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context
|
1099
|
+
* @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}
|
604
1100
|
*/
|
605
1101
|
propTypes?: never | undefined;
|
606
1102
|
}
|
607
1103
|
|
1104
|
+
/**
|
1105
|
+
* Represents a component class in React.
|
1106
|
+
*
|
1107
|
+
* @template P The props the component accepts.
|
1108
|
+
* @template S The internal state of the component.
|
1109
|
+
*/
|
608
1110
|
interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
|
609
1111
|
new(props: P, context?: any): Component<P, S>;
|
1112
|
+
/**
|
1113
|
+
* Used to declare the types of the props accepted by the
|
1114
|
+
* component. These types will be checked during rendering
|
1115
|
+
* and in development only.
|
1116
|
+
*
|
1117
|
+
* We recommend using TypeScript instead of checking prop
|
1118
|
+
* types at runtime.
|
1119
|
+
*
|
1120
|
+
* @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}
|
1121
|
+
*/
|
610
1122
|
propTypes?: WeakValidationMap<P> | undefined;
|
611
1123
|
contextType?: Context<any> | undefined;
|
1124
|
+
/**
|
1125
|
+
* @deprecated use {@link ComponentClass.contextType} instead
|
1126
|
+
*
|
1127
|
+
* Lets you specify which legacy context is consumed by
|
1128
|
+
* this component.
|
1129
|
+
*
|
1130
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}
|
1131
|
+
*/
|
612
1132
|
contextTypes?: ValidationMap<any> | undefined;
|
1133
|
+
/**
|
1134
|
+
* @deprecated
|
1135
|
+
*
|
1136
|
+
* @see {@link https://legacy.reactjs.org/docs/legacy-context.html#how-to-use-context Legacy React Docs}
|
1137
|
+
*/
|
613
1138
|
childContextTypes?: ValidationMap<any> | undefined;
|
1139
|
+
/**
|
1140
|
+
* Used to define default values for the props accepted by
|
1141
|
+
* the component.
|
1142
|
+
*
|
1143
|
+
* @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}
|
1144
|
+
*/
|
614
1145
|
defaultProps?: Partial<P> | undefined;
|
1146
|
+
/**
|
1147
|
+
* Used in debugging messages. You might want to set it
|
1148
|
+
* explicitly if you want to display a different name for
|
1149
|
+
* debugging purposes.
|
1150
|
+
*
|
1151
|
+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
|
1152
|
+
*/
|
615
1153
|
displayName?: string | undefined;
|
616
1154
|
}
|
617
1155
|
|
1156
|
+
/**
|
1157
|
+
* @deprecated Use `ClassicComponentClass` from `create-react-class`
|
1158
|
+
*
|
1159
|
+
* @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}
|
1160
|
+
* @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}
|
1161
|
+
*/
|
618
1162
|
interface ClassicComponentClass<P = {}> extends ComponentClass<P> {
|
619
1163
|
new(props: P, context?: any): ClassicComponent<P, ComponentState>;
|
620
1164
|
getDefaultProps?(): P;
|
621
1165
|
}
|
622
1166
|
|
623
1167
|
/**
|
624
|
-
*
|
1168
|
+
* Used in {@link createElement} and {@link createFactory} to represent
|
1169
|
+
* a class.
|
1170
|
+
*
|
1171
|
+
* An intersection type is used to infer multiple type parameters from
|
625
1172
|
* a single argument, which is useful for many top-level API defs.
|
626
|
-
* See https://github.com/Microsoft/TypeScript/issues/7234
|
1173
|
+
* See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue}
|
1174
|
+
* for more info.
|
627
1175
|
*/
|
628
1176
|
type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
|
629
1177
|
& C
|
@@ -715,8 +1263,8 @@ declare namespace React {
|
|
715
1263
|
* prevents this from being invoked.
|
716
1264
|
*
|
717
1265
|
* @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17
|
718
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
|
719
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1266
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
|
1267
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
720
1268
|
*/
|
721
1269
|
componentWillMount?(): void;
|
722
1270
|
/**
|
@@ -729,8 +1277,8 @@ declare namespace React {
|
|
729
1277
|
* prevents this from being invoked.
|
730
1278
|
*
|
731
1279
|
* @deprecated 16.3, use componentDidMount or the constructor instead
|
732
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
|
733
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1280
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
|
1281
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
734
1282
|
*/
|
735
1283
|
UNSAFE_componentWillMount?(): void;
|
736
1284
|
/**
|
@@ -744,8 +1292,8 @@ declare namespace React {
|
|
744
1292
|
* prevents this from being invoked.
|
745
1293
|
*
|
746
1294
|
* @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
|
747
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
|
748
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1295
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
|
1296
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
749
1297
|
*/
|
750
1298
|
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
|
751
1299
|
/**
|
@@ -761,8 +1309,8 @@ declare namespace React {
|
|
761
1309
|
* prevents this from being invoked.
|
762
1310
|
*
|
763
1311
|
* @deprecated 16.3, use static getDerivedStateFromProps instead
|
764
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
|
765
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1312
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
|
1313
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
766
1314
|
*/
|
767
1315
|
UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
|
768
1316
|
/**
|
@@ -774,8 +1322,8 @@ declare namespace React {
|
|
774
1322
|
* prevents this from being invoked.
|
775
1323
|
*
|
776
1324
|
* @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
|
777
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
|
778
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1325
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
|
1326
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
779
1327
|
*/
|
780
1328
|
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
|
781
1329
|
/**
|
@@ -789,8 +1337,8 @@ declare namespace React {
|
|
789
1337
|
* prevents this from being invoked.
|
790
1338
|
*
|
791
1339
|
* @deprecated 16.3, use getSnapshotBeforeUpdate instead
|
792
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
|
793
|
-
* @see https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
1340
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
|
1341
|
+
* @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
|
794
1342
|
*/
|
795
1343
|
UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
|
796
1344
|
}
|
@@ -814,7 +1362,9 @@ declare namespace React {
|
|
814
1362
|
}
|
815
1363
|
|
816
1364
|
/**
|
817
|
-
* @deprecated
|
1365
|
+
* @deprecated
|
1366
|
+
*
|
1367
|
+
* @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}
|
818
1368
|
*/
|
819
1369
|
interface ComponentSpec<P, S> extends Mixin<P, S> {
|
820
1370
|
render(): ReactNode;
|
@@ -824,13 +1374,45 @@ declare namespace React {
|
|
824
1374
|
|
825
1375
|
function createRef<T>(): RefObject<T>;
|
826
1376
|
|
827
|
-
|
828
|
-
|
1377
|
+
/**
|
1378
|
+
* The type of the component returned from {@link forwardRef}.
|
1379
|
+
*
|
1380
|
+
* @template P The props the component accepts, if any.
|
1381
|
+
*
|
1382
|
+
* @see {@link ExoticComponent}
|
1383
|
+
*/
|
829
1384
|
interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
|
830
1385
|
defaultProps?: Partial<P> | undefined;
|
831
1386
|
propTypes?: WeakValidationMap<P> | undefined;
|
832
1387
|
}
|
833
1388
|
|
1389
|
+
/**
|
1390
|
+
* Lets your component expose a DOM node to a parent component
|
1391
|
+
* using a ref.
|
1392
|
+
*
|
1393
|
+
* @see {@link https://react.dev/reference/react/forwardRef React Docs}
|
1394
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
|
1395
|
+
*
|
1396
|
+
* @param render See the {@link ForwardRefRenderFunction}.
|
1397
|
+
*
|
1398
|
+
* @template T The type of the DOM node.
|
1399
|
+
* @template P The props the component accepts, if any.
|
1400
|
+
*
|
1401
|
+
* @example
|
1402
|
+
*
|
1403
|
+
* ```tsx
|
1404
|
+
* interface Props {
|
1405
|
+
* children?: ReactNode;
|
1406
|
+
* type: "submit" | "button";
|
1407
|
+
* }
|
1408
|
+
*
|
1409
|
+
* export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
|
1410
|
+
* <button ref={ref} className="MyClassName" type={props.type}>
|
1411
|
+
* {props.children}
|
1412
|
+
* </button>
|
1413
|
+
* ));
|
1414
|
+
* ```
|
1415
|
+
*/
|
834
1416
|
function forwardRef<T, P = {}>(
|
835
1417
|
render: ForwardRefRenderFunction<T, P>,
|
836
1418
|
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
@@ -854,28 +1436,107 @@ declare namespace React {
|
|
854
1436
|
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
|
855
1437
|
|
856
1438
|
/**
|
857
|
-
*
|
858
|
-
*
|
1439
|
+
* Used to retrieve the props a component accepts. Can either be passed a string,
|
1440
|
+
* indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React
|
1441
|
+
* component.
|
1442
|
+
*
|
1443
|
+
* It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef}
|
1444
|
+
* instead of this type, as they let you be explicit about whether or not to include
|
1445
|
+
* the `ref` prop.
|
1446
|
+
*
|
1447
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
|
1448
|
+
*
|
1449
|
+
* @example
|
1450
|
+
*
|
1451
|
+
* ```tsx
|
1452
|
+
* // Retrieves the props an 'input' element accepts
|
1453
|
+
* type InputProps = React.ComponentProps<'input'>;
|
1454
|
+
* ```
|
1455
|
+
*
|
1456
|
+
* @example
|
1457
|
+
*
|
1458
|
+
* ```tsx
|
1459
|
+
* const MyComponent = (props: { foo: number, bar: string }) => <div />;
|
1460
|
+
*
|
1461
|
+
* // Retrieves the props 'MyComponent' accepts
|
1462
|
+
* type MyComponentProps = React.ComponentProps<typeof MyComponent>;
|
1463
|
+
* ```
|
859
1464
|
*/
|
860
1465
|
type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = T extends
|
861
1466
|
JSXElementConstructor<infer P> ? P
|
862
1467
|
: T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
|
863
1468
|
: {};
|
1469
|
+
|
864
1470
|
/**
|
865
|
-
*
|
1471
|
+
* Used to retrieve the props a component accepts with its ref. Can either be
|
1472
|
+
* passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the
|
1473
|
+
* type of a React component.
|
1474
|
+
*
|
1475
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
|
866
1476
|
*
|
867
|
-
*
|
1477
|
+
* @example
|
1478
|
+
*
|
1479
|
+
* ```tsx
|
1480
|
+
* // Retrieves the props an 'input' element accepts
|
1481
|
+
* type InputProps = React.ComponentPropsWithRef<'input'>;
|
1482
|
+
* ```
|
1483
|
+
*
|
1484
|
+
* @example
|
1485
|
+
*
|
1486
|
+
* ```tsx
|
1487
|
+
* const MyComponent = (props: { foo: number, bar: string }) => <div />;
|
1488
|
+
*
|
1489
|
+
* // Retrieves the props 'MyComponent' accepts
|
1490
|
+
* type MyComponentPropsWithRef = React.ComponentPropsWithRef<typeof MyComponent>;
|
1491
|
+
* ```
|
868
1492
|
*/
|
869
1493
|
type ComponentPropsWithRef<T extends ElementType> = T extends (new(props: infer P) => Component<any, any>)
|
870
1494
|
? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
|
871
1495
|
: PropsWithRef<ComponentProps<T>>;
|
872
1496
|
/**
|
873
|
-
*
|
1497
|
+
* Used to retrieve the props a custom component accepts with its ref.
|
1498
|
+
*
|
1499
|
+
* Unlike {@link ComponentPropsWithRef}, this only works with custom
|
1500
|
+
* components, i.e. components you define yourself. This is to improve
|
1501
|
+
* type-checking performance.
|
1502
|
+
*
|
1503
|
+
* @example
|
1504
|
+
*
|
1505
|
+
* ```tsx
|
1506
|
+
* const MyComponent = (props: { foo: number, bar: string }) => <div />;
|
1507
|
+
*
|
1508
|
+
* // Retrieves the props 'MyComponent' accepts
|
1509
|
+
* type MyComponentPropsWithRef = React.CustomComponentPropsWithRef<typeof MyComponent>;
|
1510
|
+
* ```
|
874
1511
|
*/
|
875
1512
|
type CustomComponentPropsWithRef<T extends ComponentType> = T extends (new(props: infer P) => Component<any, any>)
|
876
1513
|
? (PropsWithoutRef<P> & RefAttributes<InstanceType<T>>)
|
877
1514
|
: T extends ((props: infer P, legacyContext?: any) => ReactNode) ? PropsWithRef<P>
|
878
1515
|
: never;
|
1516
|
+
|
1517
|
+
/**
|
1518
|
+
* Used to retrieve the props a component accepts without its ref. Can either be
|
1519
|
+
* passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the
|
1520
|
+
* type of a React component.
|
1521
|
+
*
|
1522
|
+
* @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
|
1523
|
+
*
|
1524
|
+
* @example
|
1525
|
+
*
|
1526
|
+
* ```tsx
|
1527
|
+
* // Retrieves the props an 'input' element accepts
|
1528
|
+
* type InputProps = React.ComponentPropsWithoutRef<'input'>;
|
1529
|
+
* ```
|
1530
|
+
*
|
1531
|
+
* @example
|
1532
|
+
*
|
1533
|
+
* ```tsx
|
1534
|
+
* const MyComponent = (props: { foo: number, bar: string }) => <div />;
|
1535
|
+
*
|
1536
|
+
* // Retrieves the props 'MyComponent' accepts
|
1537
|
+
* type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef<typeof MyComponent>;
|
1538
|
+
* ```
|
1539
|
+
*/
|
879
1540
|
type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef<ComponentProps<T>>;
|
880
1541
|
|
881
1542
|
type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<
|
@@ -946,14 +1607,14 @@ declare namespace React {
|
|
946
1607
|
* context value, as given by the nearest context provider for the given context.
|
947
1608
|
*
|
948
1609
|
* @version 16.8.0
|
949
|
-
* @see https://react.dev/reference/react/useContext
|
1610
|
+
* @see {@link https://react.dev/reference/react/useContext}
|
950
1611
|
*/
|
951
1612
|
function useContext<T>(context: Context<T> /*, (not public API) observedBits?: number|boolean */): T;
|
952
1613
|
/**
|
953
1614
|
* Returns a stateful value, and a function to update it.
|
954
1615
|
*
|
955
1616
|
* @version 16.8.0
|
956
|
-
* @see https://react.dev/reference/react/useState
|
1617
|
+
* @see {@link https://react.dev/reference/react/useState}
|
957
1618
|
*/
|
958
1619
|
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
|
959
1620
|
// convenience overload when first argument is omitted
|
@@ -961,7 +1622,7 @@ declare namespace React {
|
|
961
1622
|
* Returns a stateful value, and a function to update it.
|
962
1623
|
*
|
963
1624
|
* @version 16.8.0
|
964
|
-
* @see https://react.dev/reference/react/useState
|
1625
|
+
* @see {@link https://react.dev/reference/react/useState}
|
965
1626
|
*/
|
966
1627
|
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
|
967
1628
|
/**
|
@@ -972,7 +1633,7 @@ declare namespace React {
|
|
972
1633
|
* updates because you can pass `dispatch` down instead of callbacks.
|
973
1634
|
*
|
974
1635
|
* @version 16.8.0
|
975
|
-
* @see https://react.dev/reference/react/useReducer
|
1636
|
+
* @see {@link https://react.dev/reference/react/useReducer}
|
976
1637
|
*/
|
977
1638
|
// overload where dispatch could accept 0 arguments.
|
978
1639
|
function useReducer<R extends ReducerWithoutAction<any>, I>(
|
@@ -988,7 +1649,7 @@ declare namespace React {
|
|
988
1649
|
* updates because you can pass `dispatch` down instead of callbacks.
|
989
1650
|
*
|
990
1651
|
* @version 16.8.0
|
991
|
-
* @see https://react.dev/reference/react/useReducer
|
1652
|
+
* @see {@link https://react.dev/reference/react/useReducer}
|
992
1653
|
*/
|
993
1654
|
// overload where dispatch could accept 0 arguments.
|
994
1655
|
function useReducer<R extends ReducerWithoutAction<any>>(
|
@@ -1004,7 +1665,7 @@ declare namespace React {
|
|
1004
1665
|
* updates because you can pass `dispatch` down instead of callbacks.
|
1005
1666
|
*
|
1006
1667
|
* @version 16.8.0
|
1007
|
-
* @see https://react.dev/reference/react/useReducer
|
1668
|
+
* @see {@link https://react.dev/reference/react/useReducer}
|
1008
1669
|
*/
|
1009
1670
|
// overload where "I" may be a subset of ReducerState<R>; used to provide autocompletion.
|
1010
1671
|
// If "I" matches ReducerState<R> exactly then the last overload will allow initializer to be omitted.
|
@@ -1022,7 +1683,7 @@ declare namespace React {
|
|
1022
1683
|
* updates because you can pass `dispatch` down instead of callbacks.
|
1023
1684
|
*
|
1024
1685
|
* @version 16.8.0
|
1025
|
-
* @see https://react.dev/reference/react/useReducer
|
1686
|
+
* @see {@link https://react.dev/reference/react/useReducer}
|
1026
1687
|
*/
|
1027
1688
|
// overload for free "I"; all goes as long as initializer converts it into "ReducerState<R>".
|
1028
1689
|
function useReducer<R extends Reducer<any, any>, I>(
|
@@ -1038,7 +1699,7 @@ declare namespace React {
|
|
1038
1699
|
* updates because you can pass `dispatch` down instead of callbacks.
|
1039
1700
|
*
|
1040
1701
|
* @version 16.8.0
|
1041
|
-
* @see https://react.dev/reference/react/useReducer
|
1702
|
+
* @see {@link https://react.dev/reference/react/useReducer}
|
1042
1703
|
*/
|
1043
1704
|
|
1044
1705
|
// I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.
|
@@ -1063,7 +1724,7 @@ declare namespace React {
|
|
1063
1724
|
* value around similar to how you’d use instance fields in classes.
|
1064
1725
|
*
|
1065
1726
|
* @version 16.8.0
|
1066
|
-
* @see https://react.dev/reference/react/useRef
|
1727
|
+
* @see {@link https://react.dev/reference/react/useRef}
|
1067
1728
|
*/
|
1068
1729
|
function useRef<T>(initialValue: T): MutableRefObject<T>;
|
1069
1730
|
// convenience overload for refs given as a ref prop as they typically start with a null value
|
@@ -1078,7 +1739,7 @@ declare namespace React {
|
|
1078
1739
|
* of the generic argument.
|
1079
1740
|
*
|
1080
1741
|
* @version 16.8.0
|
1081
|
-
* @see https://react.dev/reference/react/useRef
|
1742
|
+
* @see {@link https://react.dev/reference/react/useRef}
|
1082
1743
|
*/
|
1083
1744
|
function useRef<T>(initialValue: T | null): RefObject<T>;
|
1084
1745
|
// convenience overload for potentially undefined initialValue / call with 0 arguments
|
@@ -1091,7 +1752,7 @@ declare namespace React {
|
|
1091
1752
|
* value around similar to how you’d use instance fields in classes.
|
1092
1753
|
*
|
1093
1754
|
* @version 16.8.0
|
1094
|
-
* @see https://react.dev/reference/react/useRef
|
1755
|
+
* @see {@link https://react.dev/reference/react/useRef}
|
1095
1756
|
*/
|
1096
1757
|
function useRef<T = undefined>(): MutableRefObject<T | undefined>;
|
1097
1758
|
/**
|
@@ -1105,7 +1766,7 @@ declare namespace React {
|
|
1105
1766
|
* `componentDidMount` and `componentDidUpdate`.
|
1106
1767
|
*
|
1107
1768
|
* @version 16.8.0
|
1108
|
-
* @see https://react.dev/reference/react/useLayoutEffect
|
1769
|
+
* @see {@link https://react.dev/reference/react/useLayoutEffect}
|
1109
1770
|
*/
|
1110
1771
|
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
|
1111
1772
|
/**
|
@@ -1115,7 +1776,7 @@ declare namespace React {
|
|
1115
1776
|
* @param deps If present, effect will only activate if the values in the list change.
|
1116
1777
|
*
|
1117
1778
|
* @version 16.8.0
|
1118
|
-
* @see https://react.dev/reference/react/useEffect
|
1779
|
+
* @see {@link https://react.dev/reference/react/useEffect}
|
1119
1780
|
*/
|
1120
1781
|
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
|
1121
1782
|
// NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
|
@@ -1126,7 +1787,7 @@ declare namespace React {
|
|
1126
1787
|
* `useImperativeHandle` should be used with `React.forwardRef`.
|
1127
1788
|
*
|
1128
1789
|
* @version 16.8.0
|
1129
|
-
* @see https://react.dev/reference/react/useImperativeHandle
|
1790
|
+
* @see {@link https://react.dev/reference/react/useImperativeHandle}
|
1130
1791
|
*/
|
1131
1792
|
function useImperativeHandle<T, R extends T>(ref: Ref<T> | undefined, init: () => R, deps?: DependencyList): void;
|
1132
1793
|
// I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key
|
@@ -1136,7 +1797,7 @@ declare namespace React {
|
|
1136
1797
|
* has changed.
|
1137
1798
|
*
|
1138
1799
|
* @version 16.8.0
|
1139
|
-
* @see https://react.dev/reference/react/useCallback
|
1800
|
+
* @see {@link https://react.dev/reference/react/useCallback}
|
1140
1801
|
*/
|
1141
1802
|
// A specific function type would not trigger implicit any.
|
1142
1803
|
// See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.
|
@@ -1146,7 +1807,7 @@ declare namespace React {
|
|
1146
1807
|
* `useMemo` will only recompute the memoized value when one of the `deps` has changed.
|
1147
1808
|
*
|
1148
1809
|
* @version 16.8.0
|
1149
|
-
* @see https://react.dev/reference/react/useMemo
|
1810
|
+
* @see {@link https://react.dev/reference/react/useMemo}
|
1150
1811
|
*/
|
1151
1812
|
// allow undefined, but don't make it optional as that is very likely a mistake
|
1152
1813
|
function useMemo<T>(factory: () => T, deps: DependencyList): T;
|
@@ -1157,7 +1818,7 @@ declare namespace React {
|
|
1157
1818
|
* It’s most valuable for custom hooks that are part of shared libraries.
|
1158
1819
|
*
|
1159
1820
|
* @version 16.8.0
|
1160
|
-
* @see https://react.dev/reference/react/useDebugValue
|
1821
|
+
* @see {@link https://react.dev/reference/react/useDebugValue}
|
1161
1822
|
*/
|
1162
1823
|
// the name of the custom hook is itself derived from the function name at runtime:
|
1163
1824
|
// it's just the function name without the "use" prefix.
|
@@ -1187,7 +1848,7 @@ declare namespace React {
|
|
1187
1848
|
*
|
1188
1849
|
* @param value The value that is going to be deferred
|
1189
1850
|
*
|
1190
|
-
* @see https://react.dev/reference/react/useDeferredValue
|
1851
|
+
* @see {@link https://react.dev/reference/react/useDeferredValue}
|
1191
1852
|
*/
|
1192
1853
|
export function useDeferredValue<T>(value: T): T;
|
1193
1854
|
|
@@ -1202,9 +1863,9 @@ declare namespace React {
|
|
1202
1863
|
* The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
|
1203
1864
|
* The second is a function that takes a callback. We can use it to tell React which state we want to defer.
|
1204
1865
|
*
|
1205
|
-
* **If some state update causes a component to suspend, that state update should be wrapped in a transition
|
1866
|
+
* **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
|
1206
1867
|
*
|
1207
|
-
* @see https://react.dev/reference/react/useTransition
|
1868
|
+
* @see {@link https://react.dev/reference/react/useTransition}
|
1208
1869
|
*/
|
1209
1870
|
export function useTransition(): [boolean, TransitionStartFunction];
|
1210
1871
|
|
@@ -1221,7 +1882,7 @@ declare namespace React {
|
|
1221
1882
|
* @param effect Imperative function that can return a cleanup function
|
1222
1883
|
* @param deps If present, effect will only activate if the values in the list change.
|
1223
1884
|
*
|
1224
|
-
* @see https://github.com/facebook/react/pull/21913
|
1885
|
+
* @see {@link https://github.com/facebook/react/pull/21913}
|
1225
1886
|
*/
|
1226
1887
|
export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
|
1227
1888
|
|
@@ -1229,7 +1890,7 @@ declare namespace React {
|
|
1229
1890
|
* @param subscribe
|
1230
1891
|
* @param getSnapshot
|
1231
1892
|
*
|
1232
|
-
* @see https://github.com/reactwg/react-18/discussions/86
|
1893
|
+
* @see {@link https://github.com/reactwg/react-18/discussions/86}
|
1233
1894
|
*/
|
1234
1895
|
// keep in sync with `useSyncExternalStore` from `use-sync-external-store`
|
1235
1896
|
export function useSyncExternalStore<Snapshot>(
|
@@ -2022,12 +2683,12 @@ declare namespace React {
|
|
2022
2683
|
// Living Standard
|
2023
2684
|
/**
|
2024
2685
|
* Hints at the type of data that might be entered by the user while editing the element or its contents
|
2025
|
-
* @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
|
2686
|
+
* @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}
|
2026
2687
|
*/
|
2027
2688
|
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
|
2028
2689
|
/**
|
2029
2690
|
* Specify that a standard HTML element should behave like a defined custom built-in element
|
2030
|
-
* @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
|
2691
|
+
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}
|
2031
2692
|
*/
|
2032
2693
|
is?: string | undefined;
|
2033
2694
|
}
|