= - | { [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 } and - * {@link ComponentClass.contextTypes contextTypes}. - * - * @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 } and - * {@link ComponentClass.contextTypes contextTypes}. - * - * @template P The props the component accepts. - */ - type JSXElementConstructor
=
- | ((
- props: P,
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components React Docs}
- */
- deprecatedLegacyContext?: any,
- ) => ReactNode)
- | (new(
- props: P,
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}
- */
- deprecatedLegacyContext?: any,
- ) => Component extends ReactElement = CElement | SVGAttributes , T extends HTMLElement> extends DOMElement = (props?: Attributes & P, ...children: ReactNode[]) => ReactElement ;
-
- /** @deprecated */
- type SFCFactory = FunctionComponentFactory ;
-
- /** @deprecated */
- type FunctionComponentFactory = (
- props?: Attributes & P,
- ...children: ReactNode[]
- ) => FunctionComponentElement ;
-
- /** @deprecated */
- type ComponentFactory = CFactory , T extends Element> = (
- props?: ClassAttributes , T extends HTMLElement> extends DOMFactory , T extends Element>(
- type: string,
- ): DOMFactory (type: FunctionComponent ): FunctionComponentFactory ;
- /** @deprecated */
- function createFactory >(
- type: ClassType (type: ComponentClass ): Factory ;
-
- // DOM Elements
- // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"
- function createElement(
- type: "input",
- props?: InputHTMLAttributes , T extends HTMLElement>(
- type: keyof ReactHTML,
- props?: ClassAttributes , T extends SVGElement>(
- type: keyof ReactSVG,
- props?: ClassAttributes , T extends Element>(
- type: string,
- props?: ClassAttributes (
- type: FunctionComponent ,
- props?: Attributes & P | null,
- ...children: ReactNode[]
- ): FunctionComponentElement ;
- function createElement , C extends ComponentClass >(
- type: ClassType (
- type: FunctionComponent | ComponentClass | string,
- props?: Attributes & P | null,
- ...children: ReactNode[]
- ): ReactElement ;
-
- // DOM Elements
- // ReactHTMLElement
- function cloneElement , T extends HTMLElement>(
- element: DetailedReactHTMLElement , T extends HTMLElement>(
- element: ReactHTMLElement , 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 (
- element: FunctionComponentElement ,
- props?: Partial & Attributes,
- ...children: ReactNode[]
- ): FunctionComponentElement ;
- function cloneElement & ClassAttributes (
- 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 {
- (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 {
- propTypes?: WeakValidationMap | undefined;
- }
-
- /**
- * 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 (object: {} | null | undefined): object is ReactElement ;
-
- /**
- * Maintainer's note: Sync with {@link ReactChildren} until {@link ReactChildren} is removed.
- */
- const Children: {
- map extends ComponentLifecycle ) => Pick ;
- state: Readonly extends Component extends Component = 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: P,
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}
- */
- deprecatedLegacyContext?: any,
- ): ReactNode;
- /**
- * Used to declare the types of the props accepted by the
- * component. These types will be checked during rendering
- * and in development only.
- *
- * We recommend using TypeScript instead of checking prop
- * types at runtime.
- *
- * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}
- */
- propTypes?: WeakValidationMap | undefined;
- /**
- * @deprecated
- *
- * Lets you specify which legacy context is consumed by
- * this component.
- *
- * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}
- */
- contextTypes?: ValidationMap | undefined;
- /**
- * 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 = VoidFunctionComponent ;
-
- /**
- * @deprecated - Equivalent to {@link React.FunctionComponent}.
- *
- * @see {@link React.FunctionComponent}
- */
- interface VoidFunctionComponent {
- (
- props: P,
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}
- */
- deprecatedLegacyContext?: any,
- ): ReactNode;
- propTypes?: WeakValidationMap | undefined;
- contextTypes?: ValidationMap | undefined;
- displayName?: string | undefined;
- }
-
- /**
- * The type of the ref received by a {@link ForwardRefRenderFunction}.
- *
- * @see {@link ForwardRefRenderFunction}
- */
- type ForwardedRef extends StaticLifecycle | undefined;
- contextType?: Context | undefined;
- /**
- * 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;
- }
-
- /**
- * @deprecated Use `ClassicComponentClass` 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 ClassicComponentClass extends ComponentClass {
- new(props: P, deprecatedLegacyContext?: any): ClassicComponent > =
- & C
- & (new(props: P, deprecatedLegacyContext?: any) => T);
-
- //
- // Component Specs and Lifecycle
- // ----------------------------------------------------------------------
-
- // This should actually be something like `Lifecycle , nextState: Readonly , prevState: S) => Partial , prevState: Readonly , prevState: Readonly , nextContext: any): void;
- /**
- * Called when the component may be receiving new props.
- * React may call this even if props have not changed, so be sure to compare new and existing
- * props if you only want to handle changes.
- *
- * Calling {@link Component.setState} generally does not trigger this method.
- *
- * This method will not stop working in React 17.
- *
- * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
- * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
- * this from being invoked.
- *
- * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
- */
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly , nextContext: any): void;
- /**
- * Called immediately before rendering when new props or state is received. Not called for the initial render.
- *
- * Note: You cannot call {@link Component.setState} here.
- *
- * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
- * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
- * this from being invoked.
- *
- * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
- */
- componentWillUpdate?(nextProps: Readonly , nextState: Readonly , nextState: Readonly extends NamedExoticComponent {
- /**
- * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.
- */
- defaultProps?: Partial | undefined;
- propTypes?: WeakValidationMap | undefined;
- }
-
- /**
- * Lets your component expose a DOM node to a parent component
- * using a ref.
- *
- * @see {@link https://react.dev/reference/react/forwardRef React Docs}
- * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
- *
- * @param render See the {@link ForwardRefRenderFunction}.
- *
- * @template T The type of the DOM node.
- * @template P The props the component accepts, if any.
- *
- * @example
- *
- * ```tsx
- * interface Props {
- * children?: ReactNode;
- * type: "submit" | "button";
- * }
- *
- * export const FancyButton = forwardRef =
- // Omit would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.
- // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
- // https://github.com/Microsoft/TypeScript/issues/28339
- P extends any ? ("ref" extends keyof P ? Omit =
- // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though.
- // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
- "ref" extends keyof P
- ? P extends { ref?: infer R | undefined }
- ? string extends R ? PropsWithoutRef & { ref?: Exclude = P & { children?: ReactNode | undefined };
-
- /**
- * Used to retrieve the props a component accepts. Can either be passed a string,
- * indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React
- * component.
- *
- * It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef}
- * instead of this type, as they let you be explicit about whether or not to include
- * the `ref` prop.
- *
- * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
- *
- * @example
- *
- * ```tsx
- * // Retrieves the props an 'input' element accepts
- * type InputProps = React.ComponentProps<'input'>;
- * ```
- *
- * @example
- *
- * ```tsx
- * const MyComponent = (props: { foo: number, bar: string }) => & RefAttributes & RefAttributes
- : never;
-
- /**
- * Used to retrieve the props a component accepts without its ref. Can either be
- * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the
- * type of a React component.
- *
- * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
- *
- * @example
- *
- * ```tsx
- * // Retrieves the props an 'input' element accepts
- * type InputProps = React.ComponentPropsWithoutRef<'input'>;
- * ```
- *
- * @example
- *
- * ```tsx
- * const MyComponent = (props: { foo: number, bar: string }) => (
- Component: FunctionComponent ,
- propsAreEqual?: (prevProps: Readonly , nextProps: Readonly ) => boolean,
- ): NamedExoticComponent ;
- function memo}
- *
Hello
- * World
- * Hello
- * World
- *
- * ```
- */
- const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;
-
- /**
- * 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';
- *
- * , props: Readonly;
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Legacy React Docs}
- */
- refs: {
- [key: string]: ReactInstance;
- };
- }
-
- class PureComponent, nextContext: any): boolean;
- /**
- * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
- * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
- */
- componentWillUnmount?(): void;
- /**
- * Catches exceptions generated in descendant components. Unhandled exceptions will cause
- * the entire component tree to unmount.
- */
- componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
- }
-
- // Unfortunately, we have no way of declaring that the component constructor must implement this
- interface StaticLifecycle | null;
-
- type GetDerivedStateFromError | null;
-
- // This should be "infer SS" but can't use it yet
- interface NewLifecycle): SS | null;
- /**
- * Called immediately after updating occurs. Not called for the initial render.
- *
- * The snapshot is only present if {@link getSnapshotBeforeUpdate} is present and returns non-null.
- */
- componentDidUpdate?(prevProps: Readonly, snapshot?: SS): void;
- }
-
- interface DeprecatedLifecycle, nextContext: any): void;
- /**
- * Called immediately before rendering when new props or state is received. Not called for the initial render.
- *
- * Note: You cannot call {@link Component.setState} here.
- *
- * This method will not stop working in React 17.
- *
- * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
- * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
- * this from being invoked.
- *
- * @deprecated 16.3, use getSnapshotBeforeUpdate instead
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
- * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
- */
- UNSAFE_componentWillUpdate?(nextProps: Readonly, nextContext: any): void;
- }
-
- /**
- * @deprecated
- *
- * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}
- */
- interface Mixin = S | ((prevState: S) => S);
-
- /**
- * A function that can be used to update the state of a {@link useState}
- * or {@link useReducer} hook.
- */
- type Dispatch = (value: A) => void;
- /**
- * A {@link Dispatch} function can sometimes be called without any arguments.
- */
- type DispatchWithoutAction = () => void;
- // Unlike redux, the actions _can_ be anything
- type Reducer = (prevState: S) => S;
- // types used to try and prevent the compiler from reducing S
- // to a supertype common with the second argument to useReducer()
- type ReducerState