+ | React.ReactPortal
+ | boolean
+ | null
+ | undefined
+ | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
+ keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
+ ];
+
+/**
+ * The function returned from an effect passed to {@link React.useEffect useEffect},
+ * which can be used to clean up the effect when the component unmounts.
+ *
+ * @see {@link https://react.dev/reference/react/useEffect React Docs}
+ */
+type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
+type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
+
+// eslint-disable-next-line @definitelytyped/export-just-namespace
+export = React;
+export as namespace React;
+
+declare namespace React {
+ //
+ // React Elements
+ // ----------------------------------------------------------------------
+
+ /**
+ * Used to retrieve the possible components which accept a given set of props.
+ *
+ * Can be passed no type parameters to get a union of all possible components
+ * and tags.
+ *
+ * Is a superset of {@link ComponentType}.
+ *
+ * @template P The props to match against. If not passed, defaults to any.
+ * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.
+ *
+ * @example
+ *
+ * ```tsx
+ * // All components and tags (img, embed etc.)
+ * // which accept `src`
+ * type SrcComponents = ElementType<{ src: any }>;
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // All components
+ * type AllComponents = ElementType;
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // All custom components which match `src`, and tags which
+ * // match `src`, narrowed down to just `audio` and `embed`
+ * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;
+ * ```
+ */
+ type ElementType =
+ | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]
+ | ComponentType
;
+
+ /**
+ * Represents any user-defined component, either as a function or a class.
+ *
+ * Similar to {@link JSXElementConstructor}, but with extra properties like
+ * {@link FunctionComponent.defaultProps defaultProps }.
+ *
+ * @template P The props the component accepts.
+ *
+ * @see {@link ComponentClass}
+ * @see {@link FunctionComponent}
+ */
+ type ComponentType
= ComponentClass
| FunctionComponent
;
+
+ /**
+ * Represents any user-defined component, either as a function or a class.
+ *
+ * Similar to {@link ComponentType}, but without extra properties like
+ * {@link FunctionComponent.defaultProps defaultProps }.
+ *
+ * @template P The props the component accepts.
+ */
+ type JSXElementConstructor
=
+ | ((
+ props: P,
+ ) => ReactNode | Promise)
+ // constructor signature must match React.Component
+ | (new(props: P, context: any) => Component);
+
+ /**
+ * Created by {@link createRef}, or {@link useRef} when passed `null`.
+ *
+ * @template T The type of the ref's value.
+ *
+ * @example
+ *
+ * ```tsx
+ * const ref = createRef();
+ *
+ * ref.current = document.createElement('div'); // Error
+ * ```
+ */
+ interface RefObject {
+ /**
+ * The current value of the ref.
+ */
+ current: T;
+ }
+
+ interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
+ }
+ /**
+ * A callback fired whenever the ref's value changes.
+ *
+ * @template T The type of the ref's value.
+ *
+ * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * console.log(node)} />
+ * ```
+ */
+ type RefCallback
= {
+ bivarianceHack(
+ instance: T | null,
+ ):
+ | void
+ | (() => VoidOrUndefinedOnly)
+ | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[
+ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES
+ ];
+ }["bivarianceHack"];
+
+ /**
+ * A union type of all possible shapes for React refs.
+ *
+ * @see {@link RefCallback}
+ * @see {@link RefObject}
+ */
+
+ type Ref = RefCallback | RefObject | null;
+ /**
+ * @deprecated Use `Ref` instead. String refs are no longer supported.
+ * If you're typing a library with support for React versions with string refs, use `RefAttributes['ref']` instead.
+ */
+ type LegacyRef = Ref;
+ /**
+ * @deprecated Use `ComponentRef` instead
+ *
+ * Retrieves the type of the 'ref' prop for a given component type or tag name.
+ *
+ * @template C The component type.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentRef = React.ElementRef;
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * type DivRef = React.ElementRef<'div'>;
+ * ```
+ */
+ type ElementRef<
+ C extends
+ | ForwardRefExoticComponent
+ | { new(props: any, context: any): Component }
+ | ((props: any) => ReactNode)
+ | keyof JSX.IntrinsicElements,
+ > = ComponentRef;
+
+ type ComponentState = any;
+
+ /**
+ * A value which uniquely identifies a node among items in an array.
+ *
+ * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}
+ */
+ type Key = string | number | bigint;
+
+ /**
+ * @internal The props any component can receive.
+ * You don't have to add this type. All components automatically accept these props.
+ * ```tsx
+ * const Component = () => ;
+ *
+ * ```
+ *
+ * WARNING: The implementation of a component will never have access to these attributes.
+ * The following example would be incorrect usage because {@link Component} would never have access to `key`:
+ * ```tsx
+ * const Component = (props: React.Attributes) => props.key;
+ * ```
+ */
+ interface Attributes {
+ key?: Key | null | undefined;
+ }
+ /**
+ * The props any component accepting refs can receive.
+ * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.
+ * ```tsx
+ * const Component = forwardRef(() => );
+ * console.log(current)} />
+ * ```
+ *
+ * You only need this type if you manually author the types of props that need to be compatible with legacy refs.
+ * ```tsx
+ * interface Props extends React.RefAttributes {}
+ * declare const Component: React.FunctionComponent;
+ * ```
+ *
+ * Otherwise it's simpler to directly use {@link Ref} since you can safely use the
+ * props type to describe to props that a consumer can pass to the component
+ * as well as describing the props the implementation of a component "sees".
+ * {@link RefAttributes} is generally not safe to describe both consumer and seen props.
+ *
+ * ```tsx
+ * interface Props extends {
+ * ref?: React.Ref | undefined;
+ * }
+ * declare const Component: React.FunctionComponent;
+ * ```
+ *
+ * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.
+ * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`
+ * ```tsx
+ * const Component = (props: React.RefAttributes) => props.ref;
+ * ```
+ */
+ interface RefAttributes extends Attributes {
+ /**
+ * Allows getting a ref to the component instance.
+ * Once the component unmounts, React will set `ref.current` to `null`
+ * (or call the ref with `null` if you passed a callback ref).
+ *
+ * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
+ */
+ ref?: Ref | undefined;
+ }
+
+ /**
+ * Represents the built-in attributes available to class components.
+ */
+ interface ClassAttributes extends RefAttributes {
+ }
+
+ /**
+ * Represents a JSX element.
+ *
+ * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`
+ * only represents JSX.
+ *
+ * @template P The type of the props object
+ * @template T The type of the component or tag
+ *
+ * @example
+ *
+ * ```tsx
+ * const element: ReactElement = ;
+ * ```
+ */
+ interface ReactElement<
+ P = unknown,
+ T extends string | JSXElementConstructor = string | JSXElementConstructor,
+ > {
+ type: T;
+ props: P;
+ key: string | null;
+ }
+
+ /**
+ * @deprecated
+ */
+ interface ReactComponentElement<
+ T extends keyof JSX.IntrinsicElements | JSXElementConstructor,
+ P = Pick, Exclude, "key" | "ref">>,
+ > extends ReactElement> {}
+
+ /**
+ * @deprecated Use `ReactElement>`
+ */
+ interface FunctionComponentElement extends ReactElement> {
+ /**
+ * @deprecated Use `element.props.ref` instead.
+ */
+ ref?: ("ref" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;
+ }
+
+ /**
+ * @deprecated Use `ReactElement>`
+ */
+ type CElement> = ComponentElement;
+ /**
+ * @deprecated Use `ReactElement>`
+ */
+ interface ComponentElement> extends ReactElement> {
+ /**
+ * @deprecated Use `element.props.ref` instead.
+ */
+ ref?: Ref | undefined;
+ }
+
+ /**
+ * @deprecated Use {@link ComponentElement} instead.
+ */
+ type ClassicElement = CElement>;
+
+ // string fallback for custom web-components
+ /**
+ * @deprecated Use `ReactElement`
+ */
+ interface DOMElement | SVGAttributes, T extends Element>
+ extends ReactElement
+ {
+ /**
+ * @deprecated Use `element.props.ref` instead.
+ */
+ ref: Ref;
+ }
+
+ // ReactHTML for ReactHTMLElement
+ interface ReactHTMLElement extends DetailedReactHTMLElement, T> {}
+
+ interface DetailedReactHTMLElement, T extends HTMLElement> extends DOMElement {
+ type: HTMLElementType;
+ }
+
+ // ReactSVG for ReactSVGElement
+ interface ReactSVGElement extends DOMElement, SVGElement> {
+ type: SVGElementType;
+ }
+
+ interface ReactPortal extends ReactElement {
+ children: ReactNode;
+ }
+
+ /**
+ * Different release channels declare additional types of ReactNode this particular release channel accepts.
+ * App or library types should never augment this interface.
+ */
+ interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}
+
+ /**
+ * Represents all of the things React can render.
+ *
+ * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.
+ *
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}
+ *
+ * @example
+ *
+ * ```tsx
+ * // Typing children
+ * type Props = { children: ReactNode }
+ *
+ * const Component = ({ children }: Props) => {children}
+ *
+ * hello
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // Typing a custom element
+ * type Props = { customElement: ReactNode }
+ *
+ * const Component = ({ customElement }: Props) => {customElement}
+ *
+ * hello
, T extends HTMLElement>(
+ type: HTMLElementType,
+ props?: ClassAttributes & P | null,
+ ...children: ReactNode[]
+ ): DetailedReactHTMLElement;
+ function createElement, T extends SVGElement>(
+ type: SVGElementType,
+ props?: ClassAttributes & P | null,
+ ...children: ReactNode[]
+ ): ReactSVGElement;
+ function createElement, T extends Element>(
+ type: string,
+ props?: ClassAttributes & P | null,
+ ...children: ReactNode[]
+ ): DOMElement;
+
+ // Custom components
+
+ function createElement(
+ type: FunctionComponent
,
+ props?: Attributes & P | null,
+ ...children: ReactNode[]
+ ): FunctionComponentElement
;
+ function createElement
, C extends ComponentClass
>(
+ type: ClassType,
+ props?: ClassAttributes & P | null,
+ ...children: ReactNode[]
+ ): CElement;
+ function createElement(
+ type: FunctionComponent
| ComponentClass
| string,
+ props?: Attributes & P | null,
+ ...children: ReactNode[]
+ ): ReactElement
;
+
+ // DOM Elements
+ // ReactHTMLElement
+ function cloneElement
, T extends HTMLElement>(
+ element: DetailedReactHTMLElement,
+ props?: P,
+ ...children: ReactNode[]
+ ): DetailedReactHTMLElement;
+ // ReactHTMLElement, less specific
+ function cloneElement, T extends HTMLElement>(
+ element: ReactHTMLElement,
+ props?: P,
+ ...children: ReactNode[]
+ ): ReactHTMLElement;
+ // SVGElement
+ function cloneElement, T extends SVGElement>(
+ element: ReactSVGElement,
+ props?: P,
+ ...children: ReactNode[]
+ ): ReactSVGElement;
+ // DOM Element (has to be the last, because type checking stops at first overload that fits)
+ function cloneElement
, T extends Element>(
+ element: DOMElement,
+ props?: DOMAttributes & P,
+ ...children: ReactNode[]
+ ): DOMElement;
+
+ // Custom components
+ function cloneElement(
+ element: FunctionComponentElement
,
+ props?: Partial
& Attributes,
+ ...children: ReactNode[]
+ ): FunctionComponentElement
;
+ function cloneElement>(
+ element: CElement,
+ props?: Partial & ClassAttributes,
+ ...children: ReactNode[]
+ ): CElement;
+ function cloneElement(
+ element: ReactElement
,
+ props?: Partial
& Attributes,
+ ...children: ReactNode[]
+ ): ReactElement
;
+
+ /**
+ * Describes the props accepted by a Context {@link Provider}.
+ *
+ * @template T The type of the value the context provides.
+ */
+ interface ProviderProps {
+ value: T;
+ children?: ReactNode | undefined;
+ }
+
+ /**
+ * Describes the props accepted by a Context {@link Consumer}.
+ *
+ * @template T The type of the value the context provides.
+ */
+ interface ConsumerProps {
+ children: (value: T) => ReactNode;
+ }
+
+ /**
+ * An object masquerading as a component. These are created by functions
+ * like {@link forwardRef}, {@link memo}, and {@link createContext}.
+ *
+ * In order to make TypeScript work, we pretend that they are normal
+ * components.
+ *
+ * But they are, in fact, not callable - instead, they are objects which
+ * are treated specially by the renderer.
+ *
+ * @template P The props the component accepts.
+ */
+ interface ExoticComponent {
+ (props: P): ReactNode;
+ readonly $$typeof: symbol;
+ }
+
+ /**
+ * An {@link ExoticComponent} with a `displayName` property applied to it.
+ *
+ * @template P The props the component accepts.
+ */
+ interface NamedExoticComponent
extends ExoticComponent
{
+ /**
+ * Used in debugging messages. You might want to set it
+ * explicitly if you want to display a different name for
+ * debugging purposes.
+ *
+ * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
+ */
+ displayName?: string | undefined;
+ }
+
+ /**
+ * An {@link ExoticComponent} with a `propTypes` property applied to it.
+ *
+ * @template P The props the component accepts.
+ */
+ interface ProviderExoticComponent
extends ExoticComponent
{
+ }
+
+ /**
+ * Used to retrieve the type of a context object from a {@link Context}.
+ *
+ * @template C The context object.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { createContext } from 'react';
+ *
+ * const MyContext = createContext({ foo: 'bar' });
+ *
+ * type ContextType = ContextType;
+ * // ContextType = { foo: string }
+ * ```
+ */
+ type ContextType> = C extends Context ? T : never;
+
+ /**
+ * Wraps your components to specify the value of this context for all components inside.
+ *
+ * @see {@link https://react.dev/reference/react/createContext#provider React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { createContext } from 'react';
+ *
+ * const ThemeContext = createContext('light');
+ *
+ * function App() {
+ * return (
+ *
+ *
+ *
+ * );
+ * }
+ * ```
+ */
+ type Provider = ProviderExoticComponent>;
+
+ /**
+ * The old way to read context, before {@link useContext} existed.
+ *
+ * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { UserContext } from './user-context';
+ *
+ * function Avatar() {
+ * return (
+ *
+ * {user => 
}
+ *
+ * );
+ * }
+ * ```
+ */
+ type Consumer = ExoticComponent>;
+
+ /**
+ * Context lets components pass information deep down without explicitly
+ * passing props.
+ *
+ * Created from {@link createContext}
+ *
+ * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { createContext } from 'react';
+ *
+ * const ThemeContext = createContext('light');
+ * ```
+ */
+ interface Context extends Provider {
+ Provider: Provider;
+ Consumer: Consumer;
+ /**
+ * Used in debugging messages. You might want to set it
+ * explicitly if you want to display a different name for
+ * debugging purposes.
+ *
+ * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
+ */
+ displayName?: string | undefined;
+ }
+
+ /**
+ * Lets you create a {@link Context} that components can provide or read.
+ *
+ * @param defaultValue The value you want the context to have when there is no matching
+ * {@link Provider} in the tree above the component reading the context. This is meant
+ * as a "last resort" fallback.
+ *
+ * @see {@link https://react.dev/reference/react/createContext#reference React Docs}
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { createContext } from 'react';
+ *
+ * const ThemeContext = createContext('light');
+ * function App() {
+ * return (
+ *
+ *
+ *
+ * );
+ * }
+ * ```
+ */
+ function createContext(
+ // If you thought this should be optional, see
+ // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
+ defaultValue: T,
+ ): Context;
+
+ function isValidElement(object: {} | null | undefined): object is ReactElement
;
+
+ const Children: {
+ map(
+ children: C | readonly C[],
+ fn: (child: C, index: number) => T,
+ ): C extends null | undefined ? C : Array>;
+ forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void;
+ count(children: any): number;
+ only(children: C): C extends any[] ? never : C;
+ toArray(children: ReactNode | ReactNode[]): Array>;
+ };
+
+ export interface FragmentProps {
+ children?: React.ReactNode;
+ }
+ /**
+ * Lets you group elements without a wrapper node.
+ *
+ * @see {@link https://react.dev/reference/react/Fragment React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { Fragment } from 'react';
+ *
+ *
+ * | Hello |
+ * World |
+ *
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // Using the <> shorthand syntax:
+ *
+ * <>
+ * Hello |
+ * World |
+ *
+ * ```
+ */
+ const Fragment: ExoticComponent;
+
+ /**
+ * Lets you find common bugs in your components early during development.
+ *
+ * @see {@link https://react.dev/reference/react/StrictMode React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { StrictMode } from 'react';
+ *
+ *
+ *
+ *
+ * ```
+ */
+ const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;
+
+ /**
+ * The props accepted by {@link Suspense}.
+ *
+ * @see {@link https://react.dev/reference/react/Suspense React Docs}
+ */
+ interface SuspenseProps {
+ children?: ReactNode | undefined;
+
+ /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
+ fallback?: ReactNode;
+
+ /**
+ * A name for this Suspense boundary for instrumentation purposes.
+ * The name will help identify this boundary in React DevTools.
+ */
+ name?: string | undefined;
+ }
+
+ /**
+ * Lets you display a fallback until its children have finished loading.
+ *
+ * @see {@link https://react.dev/reference/react/Suspense React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ * import { Suspense } from 'react';
+ *
+ * }>
+ *
+ *
+ * ```
+ */
+ const Suspense: ExoticComponent;
+ const version: string;
+
+ /**
+ * The callback passed to {@link ProfilerProps.onRender}.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ type ProfilerOnRenderCallback = (
+ /**
+ * The string id prop of the {@link Profiler} tree that has just committed. This lets
+ * you identify which part of the tree was committed if you are using multiple
+ * profilers.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ id: string,
+ /**
+ * This lets you know whether the tree has just been mounted for the first time
+ * or re-rendered due to a change in props, state, or hooks.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ phase: "mount" | "update" | "nested-update",
+ /**
+ * The number of milliseconds spent rendering the {@link Profiler} and its descendants
+ * for the current update. This indicates how well the subtree makes use of
+ * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease
+ * significantly after the initial mount as many of the descendants will only need to
+ * re-render if their specific props change.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ actualDuration: number,
+ /**
+ * The number of milliseconds estimating how much time it would take to re-render the entire
+ * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most
+ * recent render durations of each component in the tree. This value estimates a worst-case
+ * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare
+ * {@link actualDuration} against it to see if memoization is working.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ baseDuration: number,
+ /**
+ * A numeric timestamp for when React began rendering the current update.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ startTime: number,
+ /**
+ * A numeric timestamp for when React committed the current update. This value is shared
+ * between all profilers in a commit, enabling them to be grouped if desirable.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ */
+ commitTime: number,
+ ) => void;
+
+ /**
+ * The props accepted by {@link Profiler}.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler React Docs}
+ */
+ interface ProfilerProps {
+ children?: ReactNode | undefined;
+ id: string;
+ onRender: ProfilerOnRenderCallback;
+ }
+
+ /**
+ * Lets you measure rendering performance of a React tree programmatically.
+ *
+ * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ *
+ *
+ *
+ * ```
+ */
+ const Profiler: ExoticComponent;
+
+ //
+ // Component API
+ // ----------------------------------------------------------------------
+
+ type ReactInstance = Component | Element;
+
+ // Base component for plain JS classes
+ interface Component extends ComponentLifecycle {}
+ class Component {
+ /**
+ * If set, `this.context` will be set at runtime to the current value of the given Context.
+ *
+ * @example
+ *
+ * ```ts
+ * type MyContext = number
+ * const Ctx = React.createContext(0)
+ *
+ * class Foo extends React.Component {
+ * static contextType = Ctx
+ * context!: React.ContextType
+ * render () {
+ * return <>My context's value: {this.context};
+ * }
+ * }
+ * ```
+ *
+ * @see {@link https://react.dev/reference/react/Component#static-contexttype}
+ */
+ static contextType?: Context | undefined;
+
+ /**
+ * Ignored by React.
+ * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
+ */
+ static propTypes?: any;
+
+ /**
+ * If using React Context, re-declare this in your class to be the
+ * `React.ContextType` of your `static contextType`.
+ * Should be used with type annotation or static contextType.
+ *
+ * @example
+ * ```ts
+ * static contextType = MyContext
+ * // For TS pre-3.7:
+ * context!: React.ContextType
+ * // For TS 3.7 and above:
+ * declare context: React.ContextType
+ * ```
+ *
+ * @see {@link https://react.dev/reference/react/Component#context React Docs}
+ */
+ context: unknown;
+
+ // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
+ constructor(props: P);
+ /**
+ * @param props
+ * @param context value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
+ * in `contextType`.
+ */
+ // TODO: Ideally we'd infer the constructor signatur from `contextType`.
+ // Might be hard to ship without breaking existing code.
+ constructor(props: P, context: any);
+
+ // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+ // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+ // Also, the ` | S` allows intellisense to not be dumbisense
+ setState(
+ state: ((prevState: Readonly, props: Readonly) => Pick | S | null) | (Pick | S | null),
+ callback?: () => void,
+ ): void;
+
+ forceUpdate(callback?: () => void): void;
+ render(): ReactNode;
+
+ readonly props: Readonly;
+ state: Readonly;
+ }
+
+ class PureComponent
extends Component {}
+
+ /**
+ * @deprecated Use `ClassicComponent` from `create-react-class`
+ *
+ * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}
+ * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}
+ */
+ interface ClassicComponent extends Component {
+ replaceState(nextState: S, callback?: () => void): void;
+ isMounted(): boolean;
+ getInitialState?(): S;
+ }
+
+ //
+ // Class Interfaces
+ // ----------------------------------------------------------------------
+
+ /**
+ * Represents the type of a function component. Can optionally
+ * receive a type argument that represents the props the component
+ * receives.
+ *
+ * @template P The props the component accepts.
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
+ * @alias for {@link FunctionComponent}
+ *
+ * @example
+ *
+ * ```tsx
+ * // With props:
+ * type Props = { name: string }
+ *
+ * const MyComponent: FC = (props) => {
+ * return {props.name}
+ * }
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // Without props:
+ * const MyComponentWithoutProps: FC = () => {
+ * return MyComponentWithoutProps
+ * }
+ * ```
+ */
+ type FC = FunctionComponent
;
+
+ /**
+ * Represents the type of a function component. Can optionally
+ * receive a type argument that represents the props the component
+ * accepts.
+ *
+ * @template P The props the component accepts.
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
+ *
+ * @example
+ *
+ * ```tsx
+ * // With props:
+ * type Props = { name: string }
+ *
+ * const MyComponent: FunctionComponent = (props) => {
+ * return {props.name}
+ * }
+ * ```
+ *
+ * @example
+ *
+ * ```tsx
+ * // Without props:
+ * const MyComponentWithoutProps: FunctionComponent = () => {
+ * return MyComponentWithoutProps
+ * }
+ * ```
+ */
+ interface FunctionComponent {
+ (props: P): ReactNode | Promise;
+ /**
+ * Ignored by React.
+ * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
+ */
+ propTypes?: any;
+ /**
+ * Used in debugging messages. You might want to set it
+ * explicitly if you want to display a different name for
+ * debugging purposes.
+ *
+ * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
+ *
+ * @example
+ *
+ * ```tsx
+ *
+ * const MyComponent: FC = () => {
+ * return Hello!
+ * }
+ *
+ * MyComponent.displayName = 'MyAwesomeComponent'
+ * ```
+ */
+ displayName?: string | undefined;
+ }
+
+ /**
+ * The type of the ref received by a {@link ForwardRefRenderFunction}.
+ *
+ * @see {@link ForwardRefRenderFunction}
+ */
+ // Making T nullable is assuming the refs will be managed by React or the component impl will write it somewhere else.
+ // But this isn't necessarily true. We haven't heard complains about it yet and hopefully `forwardRef` is removed from React before we do.
+ type ForwardedRef = ((instance: T | null) => void) | RefObject | null;
+
+ /**
+ * The type of the function passed to {@link forwardRef}. This is considered different
+ * to a normal {@link FunctionComponent} because it receives an additional argument,
+ *
+ * @param props Props passed to the component, if any.
+ * @param ref A ref forwarded to the component of type {@link ForwardedRef}.
+ *
+ * @template T The type of the forwarded ref.
+ * @template P The type of the props the component accepts.
+ *
+ * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
+ * @see {@link forwardRef}
+ */
+ interface ForwardRefRenderFunction {
+ (props: P, ref: ForwardedRef): ReactNode;
+ /**
+ * Used in debugging messages. You might want to set it
+ * explicitly if you want to display a different name for
+ * debugging purposes.
+ *
+ * Will show `ForwardRef(${Component.displayName || Component.name})`
+ * in devtools by default, but can be given its own specific name.
+ *
+ * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
+ */
+ displayName?: string | undefined;
+ /**
+ * Ignored by React.
+ * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
+ */
+ propTypes?: any;
+ }
+
+ /**
+ * Represents a component class in React.
+ *
+ * @template P The props the component accepts.
+ * @template S The internal state of the component.
+ */
+ interface ComponentClass extends StaticLifecycle {
+ // constructor signature must match React.Component
+ new(
+ props: P,
+ /**
+ * Value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
+ * in `contextType`.
+ */
+ context?: any,
+ ): Component;
+ /**
+ * Ignored by React.
+ * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
+ */
+ propTypes?: any;
+ contextType?: Context | undefined;
+ defaultProps?: Partial