@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.
Files changed (3) hide show
  1. react/README.md +1 -1
  2. react/package.json +2 -2
  3. 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: Sat, 03 Feb 2024 00:50:19 GMT
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.52",
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": "93fc940a3cfa823f1e10e0c4058e113f5fcc839de2adf5b2c9b6046991b0a4e0",
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
- // Destructors are only allowed to return void.
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
- type ElementType<P = any> =
41
- | {
42
- [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never;
43
- }[keyof JSX.IntrinsicElements]
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 https://legacy.react/ts5.0js.org/docs/legacy-context.html#referencing-context-in-stateless-function-components
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 https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods
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
- // Bivariance hack for consistent unsoundness with RefObject
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
- // TODO: similar to how Fragment is actually a symbol, the values returned from createContext,
383
- // forwardRef and memo are actually objects that are treated specially by the renderer; see:
384
- // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48
385
- // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45
386
- // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31
387
- // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than
388
- // by pretending to be a normal component.
389
- //
390
- // We don't just use ComponentType or FunctionComponent types because you are not supposed to attach statics to this
391
- // object, but rather to the original function.
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
- // NOTE: only the Context object itself can get a displayName
411
- // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325
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 https://react.dev/reference/react/Profiler#onrender-callback Profiler API}
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 with `React.FC`.
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 with `React.FunctionComponent`.
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
- * We use an intersection type to infer multiple type parameters from
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 for more info.
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 https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
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
- // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,
828
- // but can be given its own specific name
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
- * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,
858
- * or ComponentPropsWithoutRef when refs are not supported.
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
- * Get the props of a component that supports the `ref` prop.
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
- * WARNING: Use `CustomComponentPropsWithRef` if you know that `T` is not a host component for better type-checking performance.
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
- * Like `ComponentPropsWithRef` but without support for host components (i.e. just "custom components") to improve type-checking performance.
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
  }