@types/react

Version 19.0.10
Published 1 day ago
801 kB
1 dependency
MIT license

Install

npm i @types/react

yarn add @types/react

pnpm add @types/react

Overview

TypeScript definitions for react

Index

Namespaces

Variables

variable Children

const Children: {
    map<T, C>(
        children: C | readonly C[],
        fn: (child: C, index: number) => T
    ): C extends null ? C : Exclude<T, boolean>[];
    forEach<C>(
        children: C | readonly C[],
        fn: (child: C, index: number) => void
    ): void;
    count(children: any): number;
    only<C>(children: C): C extends any[] ? never : C;
    toArray(
        children: ReactNode | ReactNode[]
    ): Array<Exclude<ReactNode, boolean | null | undefined>>;
};

variable Fragment

const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;

Lets you group elements without a wrapper node.

Example 1

import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>

Example 2

// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>

variable Profiler

const Profiler: ExoticComponent<ProfilerProps>;

Lets you measure rendering performance of a React tree programmatically.
Example 1
<Profiler id="App" onRender={onRender}> <App /> </Profiler>
See Also

variable StrictMode

const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;

Lets you find common bugs in your components early during development.
Example 1
import { StrictMode } from 'react'; <StrictMode> <App /> </StrictMode>
See Also

variable Suspense

const Suspense: ExoticComponent<SuspenseProps>;

Lets you display a fallback until its children have finished loading.

Example 1

import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>

variable UNDEFINED_VOID_ONLY

const UNDEFINED_VOID_ONLY: Symbol;

variable unstable_SuspenseList

const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;

SuspenseList helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.
When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a SuspenseList, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).
See Also
- https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
- https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist

variable unstable_ViewTransition

const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;

Opt-in for using in React. View Transitions only trigger for async updates like startTransition, useDeferredValue, Actions or <Suspense> revealing from fallback to content. Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't.
See Also
- https://github.com/facebook/react/pull/31975

variable version

const version: string;

Functions

function act

act: {
    (callback: () => VoidOrUndefinedOnly): void;
    <T>(callback: () => T | Promise<T>): Promise<T>;
};

Wrap any code rendering and triggering updates to your components into act() calls.
Ensures that the behavior in your tests matches what happens in the browser more closely by executing pending useEffects before returning. This also reduces the amount of re-renders done.
Parameter callback
A synchronous, void callback that will execute as a single, complete React commit.
See Also
- https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks

function cache

cache: <CachedFunction extends Function>(fn: CachedFunction) => CachedFunction;

function captureOwnerStack

captureOwnerStack: () => string | null;

Warning: Only available in development builds.
See Also

function cloneElement

cloneElement: {
    <P extends HTMLAttributes<T>, T extends HTMLElement>(
        element: DetailedReactHTMLElement<P, T>,
        props?: P,
        ...children: ReactNode[]
    ): DetailedReactHTMLElement<P, T>;
    <P extends HTMLAttributes<T>, T extends HTMLElement>(
        element: ReactHTMLElement<T>,
        props?: P,
        ...children: ReactNode[]
    ): ReactHTMLElement<T>;
    <P extends SVGAttributes<T>, T extends SVGElement>(
        element: ReactSVGElement,
        props?: P,
        ...children: ReactNode[]
    ): ReactSVGElement;
    <P extends DOMAttributes<T>, T extends Element>(
        element: DOMElement<P, T>,
        props?: DOMAttributes<T> & P,
        ...children: ReactNode[]
    ): DOMElement<P, T>;
    <P>(
        element: FunctionComponentElement<P>,
        props?: Partial<P> & Attributes,
        ...children: ReactNode[]
    ): FunctionComponentElement<P>;
    <P, T extends Component<P, any, any>>(
        element: CElement<P, T>,
        props?: Partial<P> & ClassAttributes<T>,
        ...children: ReactNode[]
    ): CElement<P, T>;
    <P>(
        element: ReactElement<P, string | JSXElementConstructor<any>>,
        props?: Partial<P> & Attributes,
        ...children: ReactNode[]
    ): ReactElement<P, string | JSXElementConstructor<any>>;
};

function createContext

createContext: <T>(defaultValue: T) => Context<T>;

Lets you create a Context that components can provide or read.
Parameter defaultValue
The value you want the context to have when there is no matching Provider in the tree above the component reading the context. This is meant as a "last resort" fallback.
Example 1
import { createContext } from 'react'; const ThemeContext = createContext('light'); function App() { return ( <ThemeContext value="dark"> <Toolbar /> </ThemeContext> ); }
See Also

function createElement

createElement: {
    (
        type: 'input',
        props?:
            | (InputHTMLAttributes<HTMLInputElement> &
                  ClassAttributes<HTMLInputElement>)
            | null,
        ...children: ReactNode[]
    ): DetailedReactHTMLElement<
        InputHTMLAttributes<HTMLInputElement>,
        HTMLInputElement
    >;
    <P extends HTMLAttributes<T>, T extends HTMLElement>(
        type: HTMLElementType,
        props?: ClassAttributes<T> & P,
        ...children: ReactNode[]
    ): DetailedReactHTMLElement<P, T>;
    <P extends SVGAttributes<T>, T extends SVGElement>(
        type: SVGElementType,
        props?: ClassAttributes<T> & P,
        ...children: ReactNode[]
    ): ReactSVGElement;
    <P extends DOMAttributes<T>, T extends Element>(
        type: string,
        props?: ClassAttributes<T> & P,
        ...children: ReactNode[]
    ): DOMElement<P, T>;
    <P extends {}>(
        type: FunctionComponent<P>,
        props?: Attributes & P,
        ...children: ReactNode[]
    ): FunctionComponentElement<P>;
    <
        P extends {},
        T extends Component<P, any, any>,
        C extends ComponentClass<P, any>
    >(
        type: ClassType<P, T, C>,
        props?: ClassAttributes<T> & P,
        ...children: ReactNode[]
    ): CElement<P, T>;
    <P extends {}>(
        type: string | FunctionComponent<P> | ComponentClass<P, any>,
        props?: Attributes & P,
        ...children: ReactNode[]
    ): ReactElement<P, string | JSXElementConstructor<any>>;
};

function createRef

createRef: <T>() => RefObject<T | null>;

function experimental_taintObjectReference

experimental_taintObjectReference: (
    message: string | undefined,
    object: Reference
) => void;

function experimental_taintUniqueValue

experimental_taintUniqueValue: (
    message: string | undefined,
    lifetime: Reference,
    value: TaintableUniqueValue
) => void;

function experimental_useEffectEvent

experimental_useEffectEvent: <T extends Function>(event: T) => T;

function forwardRef

forwardRef: <T, P = {}>(
    render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>
) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

Lets your component expose a DOM node to a parent component using a ref.

Parameter render

See the ForwardRefRenderFunction.

T The type of the DOM node. P The props the component accepts, if any.

Example 1

interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));

function isValidElement

isValidElement: <P>(
    object: {} | null | undefined
) => object is ReactElement<P, string | JSXElementConstructor<any>>;

function lazy

lazy: <T extends ComponentType<any>>(
    load: () => Promise<{ default: T }>
) => LazyExoticComponent<T>;

Lets you defer loading a component’s code until it is rendered for the first time.
Parameter load
A function that returns a Promise or another thenable (a Promise-like object with a then method). React will not call load until the first time you attempt to render the returned component. After React first calls load, it will wait for it to resolve, and then render the resolved value’s .default as a React component. Both the returned Promise and the Promise’s resolved value will be cached, so React will not call load more than once. If the Promise rejects, React will throw the rejection reason for the nearest Error Boundary to handle.
Example 1
import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
See Also

function memo

memo: {
    <P extends object>(
        Component: FunctionComponent<P>,
        propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean
    ): NamedExoticComponent<P>;
    <T extends ComponentType<any>>(
        Component: T,
        propsAreEqual?: (
            prevProps: Readonly<ComponentProps<T>>,
            nextProps: Readonly<ComponentProps<T>>
        ) => boolean
    ): MemoExoticComponent<T>;
};

Lets you skip re-rendering a component when its props are unchanged.
Parameter Component
The component to memoize.
Parameter propsAreEqual
A function that will be used to determine if the props have changed.
Example 1
import { memo } from 'react'; const SomeComponent = memo(function SomeComponent(props: { foo: string }) { // ... });
See Also

function startTransition

startTransition: (scope: TransitionFunction) => void;

Similar to useTransition but allows uses where hooks are not available.
Parameter callback
A function which causes state updates that can be deferred.

function unstable_useCacheRefresh

unstable_useCacheRefresh: () => () => void;

function unstable_useSwipeTransition

unstable_useSwipeTransition: <Value>(
    previous: Value,
    current: Value,
    next: Value
) => [value: Value, startGesture: StartGesture];

function use

use: <T>(usable: Usable<T>) => T;

function useActionState

useActionState: {
    <State>(
        action: (state: Awaited<State>) => State | Promise<State>,
        initialState: Awaited<State>,
        permalink?: string
    ): [state: Awaited<State>, dispatch: () => void, isPending: boolean];
    <State, Payload>(
        action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
        initialState: Awaited<State>,
        permalink?: string
    ): [
        state: Awaited<State>,
        dispatch: (payload: Payload) => void,
        isPending: boolean
    ];
};

function useCallback

useCallback: <T extends Function>(callback: T, deps: DependencyList) => T;

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.
16.8.0
See Also
- https://react.dev/reference/react/useCallback

function useContext

useContext: <T>(context: Context<T>) => T;

Accepts a context object (the value returned from React.createContext) and returns the current context value, as given by the nearest context provider for the given context.
16.8.0
See Also
- https://react.dev/reference/react/useContext

function useDebugValue

useDebugValue: <T>(value: T, format?: (value: T) => any) => void;

useDebugValue can be used to display a label for custom hooks in React DevTools.
NOTE: We don’t recommend adding debug values to every custom hook. It’s most valuable for custom hooks that are part of shared libraries.
16.8.0
See Also
- https://react.dev/reference/react/useDebugValue

function useDeferredValue

useDeferredValue: <T>(value: T, initialValue?: T) => T;

Returns a deferred version of the value that may “lag behind” it.
This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.
A good example of this is a text input.
Parameter value
The value that is going to be deferred
Parameter initialValue
A value to use during the initial render of a component. If this option is omitted, useDeferredValue will not defer during the initial render, because there’s no previous version of value that it can render instead.
See Also
- https://react.dev/reference/react/useDeferredValue

function useEffect

useEffect: (effect: EffectCallback, deps?: DependencyList) => void;

Accepts a function that contains imperative, possibly effectful code.
Parameter effect
Imperative function that can return a cleanup function
Parameter deps
If present, effect will only activate if the values in the list change.
16.8.0
See Also
- https://react.dev/reference/react/useEffect

function useId

useId: () => string;

function useImperativeHandle

useImperativeHandle: <T, R extends T>(
    ref: Ref<T> | undefined,
    init: () => R,
    deps?: DependencyList
) => void;

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases.
useImperativeHandle should be used with React.forwardRef.
16.8.0
See Also
- https://react.dev/reference/react/useImperativeHandle

function useInsertionEffect

useInsertionEffect: (effect: EffectCallback, deps?: DependencyList) => void;

Parameter effect
Imperative function that can return a cleanup function
Parameter deps
If present, effect will only activate if the values in the list change.
See Also
- https://github.com/facebook/react/pull/21913

function useLayoutEffect

useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void;

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect when possible to avoid blocking visual updates.
If you’re migrating code from a class component, useLayoutEffect fires in the same phase as componentDidMount and componentDidUpdate.
16.8.0
See Also
- https://react.dev/reference/react/useLayoutEffect

function useMemo

useMemo: <T>(factory: () => T, deps: DependencyList) => T;

useMemo will only recompute the memoized value when one of the deps has changed.
16.8.0
See Also
- https://react.dev/reference/react/useMemo

function useOptimistic

useOptimistic: {
    <State>(passthrough: State): [
        State,
        (action: State | ((pendingState: State) => State)) => void
    ];
    <State, Action>(
        passthrough: State,
        reducer: (state: State, action: Action) => State
    ): [State, (action: Action) => void];
};

function useReducer

useReducer: {
    <S, A extends AnyActionArg>(
        reducer: (prevState: S, ...args: A) => S,
        initialState: S
    ): [S, ActionDispatch<A>];
    <S, A extends AnyActionArg>(
        reducer: (prevState: S, ...args: A) => S,
        initialState: S
    ): [S, ActionDispatch<A>];
    <S, I, A extends AnyActionArg>(
        reducer: (prevState: S, ...args: A) => S,
        initialArg: I,
        init: (i: I) => S
    ): [S, ActionDispatch<A>];
};

An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
16.8.0
See Also
- https://react.dev/reference/react/useReducer

function useRef

useRef: {
    <T>(initialValue: T): RefObject<T>;
    <T>(initialValue: T): RefObject<T>;
    <T>(initialValue: T): RefObject<T>;
};

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.
16.8.0
See Also
- https://react.dev/reference/react/useRef

function useState

useState: {
    <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
    <S = undefined>(): [S, Dispatch<SetStateAction<S>>];
};

Returns a stateful value, and a function to update it.
16.8.0
See Also
- https://react.dev/reference/react/useState

function useSyncExternalStore

useSyncExternalStore: <Snapshot>(
    subscribe: (onStoreChange: () => void) => () => void,
    getSnapshot: () => Snapshot,
    getServerSnapshot?: () => Snapshot
) => Snapshot;

Parameter subscribe
Parameter getSnapshot
See Also
- https://github.com/reactwg/react-18/discussions/86

function useTransition

useTransition: () => [boolean, TransitionStartFunction];

Allows components to avoid undesirable loading states by waiting for content to load before transitioning to the next screen. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.
The useTransition hook returns two values in an array.
The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish. The second is a function that takes a callback. We can use it to tell React which state we want to defer.
**If some state update causes a component to suspend, that state update should be wrapped in a transition.**
See Also
- https://react.dev/reference/react/useTransition

Classes

class Component

class Component<P, S> {}

constructor

constructor(props: {});

property context

context: {};

If using the new style 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 1
static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>
See Also

property contextType

static contextType?: Context<any>;

If set, this.context will be set at runtime to the current value of the given Context.

Example 1

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
  static contextType = Ctx
  context!: React.ContextType<typeof Ctx>
  render () {
    return <>My context's value: {this.context}</>;
  }
}

property props

readonly props: Readonly<P>;

property propTypes

static propTypes?: any;

Ignored by React.
Deprecated
Only kept in types for backwards compatibility. Will be removed in a future major release.

property state

state: Readonly<S>;

method forceUpdate

forceUpdate: (callback?: () => void) => void;

method render

render: () => ReactNode;

method setState

setState: <K extends keyof S>(
    state:
        | S
        | ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null)
        | Pick<S, K>,
    callback?: () => void
) => void;

class PureComponent

class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}

Interfaces

interface AbstractView

interface AbstractView {}

property document

document: Document;

property styleMedia

styleMedia: StyleMedia;

interface AllHTMLAttributes

interface AllHTMLAttributes<T> extends HTMLAttributes<T> {}

property accept

accept?: string | undefined;

property acceptCharset

acceptCharset?: string | undefined;

property action

action?:
    | string
    | undefined
    | ((formData: FormData) => void | Promise<void>)
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];

property allowFullScreen

allowFullScreen?: boolean | undefined;

property allowTransparency

allowTransparency?: boolean | undefined;

property alt

alt?: string | undefined;

property as

as?: string | undefined;

property async

async?: boolean | undefined;

property autoComplete

autoComplete?: string | undefined;

property autoPlay

autoPlay?: boolean | undefined;

property capture

capture?: boolean | 'user' | 'environment' | undefined;

property cellPadding

cellPadding?: number | string | undefined;

property cellSpacing

cellSpacing?: number | string | undefined;

property challenge

challenge?: string | undefined;

property charSet

charSet?: string | undefined;

property checked

checked?: boolean | undefined;

property cite

cite?: string | undefined;

property classID

classID?: string | undefined;

property cols

cols?: number | undefined;

property colSpan

colSpan?: number | undefined;

property controls

controls?: boolean | undefined;

property coords

coords?: string | undefined;

property crossOrigin

crossOrigin?: CrossOrigin;

property data

data?: string | undefined;

property dateTime

dateTime?: string | undefined;

property default

default?: boolean | undefined;

property defer

defer?: boolean | undefined;

property disabled

disabled?: boolean | undefined;

property download

download?: any;

property encType

encType?: string | undefined;

property form

form?: string | undefined;

property formAction

formAction?:
    | string
    | undefined
    | ((formData: FormData) => void | Promise<void>)
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];

property formEncType

formEncType?: string | undefined;

property formMethod

formMethod?: string | undefined;

property formNoValidate

formNoValidate?: boolean | undefined;

property formTarget

formTarget?: string | undefined;

property frameBorder

frameBorder?: number | string | undefined;

property headers

headers?: string | undefined;

property height

height?: number | string | undefined;

property high

high?: number | undefined;

property href

href?: string | undefined;

property hrefLang

hrefLang?: string | undefined;

property htmlFor

htmlFor?: string | undefined;

property httpEquiv

httpEquiv?: string | undefined;

property integrity

integrity?: string | undefined;

property keyParams

keyParams?: string | undefined;

property keyType

keyType?: string | undefined;

property kind

kind?: string | undefined;

property label

label?: string | undefined;

property list

list?: string | undefined;

property loop

loop?: boolean | undefined;

property low

low?: number | undefined;

property manifest

manifest?: string | undefined;

property marginHeight

marginHeight?: number | undefined;

property marginWidth

marginWidth?: number | undefined;

property max

max?: number | string | undefined;

property maxLength

maxLength?: number | undefined;

property media

media?: string | undefined;

property mediaGroup

mediaGroup?: string | undefined;

property method

method?: string | undefined;

property min

min?: number | string | undefined;

property minLength

minLength?: number | undefined;

property multiple

multiple?: boolean | undefined;

property muted

muted?: boolean | undefined;

property name

name?: string | undefined;

property noValidate

noValidate?: boolean | undefined;

property open

open?: boolean | undefined;

property optimum

optimum?: number | undefined;

property pattern

pattern?: string | undefined;

property placeholder

placeholder?: string | undefined;

property playsInline

playsInline?: boolean | undefined;

property poster

poster?: string | undefined;

property preload

preload?: string | undefined;

property readOnly

readOnly?: boolean | undefined;

property required

required?: boolean | undefined;

property reversed

reversed?: boolean | undefined;

property rows

rows?: number | undefined;

property rowSpan

rowSpan?: number | undefined;

property sandbox

sandbox?: string | undefined;

property scope

scope?: string | undefined;

property scoped

scoped?: boolean | undefined;

property scrolling

scrolling?: string | undefined;

property seamless

seamless?: boolean | undefined;

property selected

selected?: boolean | undefined;

property shape

shape?: string | undefined;

property size

size?: number | undefined;

property sizes

sizes?: string | undefined;

property span

span?: number | undefined;

property src

src?: string | undefined;

property srcDoc

srcDoc?: string | undefined;

property srcLang

srcLang?: string | undefined;

property srcSet

srcSet?: string | undefined;

property start

start?: number | undefined;

property step

step?: number | string | undefined;

property summary

summary?: string | undefined;

property target

target?: string | undefined;

property type

type?: string | undefined;

property useMap

useMap?: string | undefined;

property value

value?: string | readonly string[] | number | undefined;

property width

width?: number | string | undefined;

property wmode

wmode?: string | undefined;

property wrap

wrap?: string | undefined;

interface AnchorHTMLAttributes

interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {}

property download

download?: any;

property href

href?: string | undefined;

property hrefLang

hrefLang?: string | undefined;

property media

media?: string | undefined;

property ping

ping?: string | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property target

target?: HTMLAttributeAnchorTarget | undefined;

property type

type?: string | undefined;

interface AnimationEvent

interface AnimationEvent<T = Element>
    extends SyntheticEvent<T, NativeAnimationEvent> {}

property animationName

animationName: string;

property elapsedTime

elapsedTime: number;

property pseudoElement

pseudoElement: string;

interface AreaHTMLAttributes

interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {}

property alt

alt?: string | undefined;

property coords

coords?: string | undefined;

property download

download?: any;

property href

href?: string | undefined;

property hrefLang

hrefLang?: string | undefined;

property media

media?: string | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property shape

shape?: string | undefined;

property target

target?: string | undefined;

interface AriaAttributes

interface AriaAttributes {}

property "aria-activedescendant"

'aria-activedescendant'?: string | undefined;

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

property "aria-atomic"

'aria-atomic'?: Booleanish | undefined;

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

property "aria-autocomplete"

'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

property "aria-braillelabel"

'aria-braillelabel'?: string | undefined;

Defines a string value that labels the current element, which is intended to be converted into Braille.
See Also
- aria-label.

property "aria-brailleroledescription"

'aria-brailleroledescription'?: string | undefined;

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
See Also
- aria-roledescription.

property "aria-busy"

'aria-busy'?: Booleanish | undefined;

property "aria-checked"

'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
See Also
- aria-pressed
- aria-selected.

property "aria-colcount"

'aria-colcount'?: number | undefined;

Defines the total number of columns in a table, grid, or treegrid.
See Also
- aria-colindex.

property "aria-colindex"

'aria-colindex'?: number | undefined;

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
See Also
- aria-colcount
- aria-colspan.

property "aria-colindextext"

'aria-colindextext'?: string | undefined;

Defines a human readable text alternative of aria-colindex.
See Also
- aria-rowindextext.

property "aria-colspan"

'aria-colspan'?: number | undefined;

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
See Also
- aria-colindex
- aria-rowspan.

property "aria-controls"

'aria-controls'?: string | undefined;

Identifies the element (or elements) whose contents or presence are controlled by the current element.
See Also
- aria-owns.

property "aria-current"

'aria-current'?:
    | boolean
    | 'false'
    | 'true'
    | 'page'
    | 'step'
    | 'location'
    | 'date'
    | 'time'
    | undefined;

Indicates the element that represents the current item within a container or set of related elements.

property "aria-describedby"

'aria-describedby'?: string | undefined;

Identifies the element (or elements) that describes the object.
See Also
- aria-labelledby

property "aria-description"

'aria-description'?: string | undefined;

Defines a string value that describes or annotates the current element.
See Also
- related aria-describedby.

property "aria-details"

'aria-details'?: string | undefined;

Identifies the element that provides a detailed, extended description for the object.
See Also
- aria-describedby.

property "aria-disabled"

'aria-disabled'?: Booleanish | undefined;

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
See Also
- aria-hidden
- aria-readonly.

property "aria-dropeffect"

'aria-dropeffect'?:
    | 'none'
    | 'copy'
    | 'execute'
    | 'link'
    | 'move'
    | 'popup'
    | undefined;

Indicates what functions can be performed when a dragged object is released on the drop target.
Deprecated
in ARIA 1.1

property "aria-errormessage"

'aria-errormessage'?: string | undefined;

Identifies the element that provides an error message for the object.
See Also
- aria-invalid
- aria-describedby.

property "aria-expanded"

'aria-expanded'?: Booleanish | undefined;

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

property "aria-flowto"

'aria-flowto'?: string | undefined;

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

property "aria-grabbed"

'aria-grabbed'?: Booleanish | undefined;

Indicates an element's "grabbed" state in a drag-and-drop operation.
Deprecated
in ARIA 1.1

property "aria-haspopup"

'aria-haspopup'?:
    | boolean
    | 'false'
    | 'true'
    | 'menu'
    | 'listbox'
    | 'tree'
    | 'grid'
    | 'dialog'
    | undefined;

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

property "aria-hidden"

'aria-hidden'?: Booleanish | undefined;

Indicates whether the element is exposed to an accessibility API.
See Also
- aria-disabled.

property "aria-invalid"

'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined;

Indicates the entered value does not conform to the format expected by the application.
See Also
- aria-errormessage.

property "aria-keyshortcuts"

'aria-keyshortcuts'?: string | undefined;

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

property "aria-label"

'aria-label'?: string | undefined;

Defines a string value that labels the current element.
See Also
- aria-labelledby.

property "aria-labelledby"

'aria-labelledby'?: string | undefined;

Identifies the element (or elements) that labels the current element.
See Also
- aria-describedby.

property "aria-level"

'aria-level'?: number | undefined;

Defines the hierarchical level of an element within a structure.

property "aria-live"

'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

'aria-modal'?: Booleanish | undefined;

Indicates whether an element is modal when displayed.

property "aria-multiline"

'aria-multiline'?: Booleanish | undefined;

Indicates whether a text box accepts multiple lines of input or only a single line.

property "aria-multiselectable"

'aria-multiselectable'?: Booleanish | undefined;

Indicates that the user may select more than one item from the current selectable descendants.

property "aria-orientation"

'aria-orientation'?: 'horizontal' | 'vertical' | undefined;

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

property "aria-owns"

'aria-owns'?: string | undefined;

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
See Also
- aria-controls.

property "aria-placeholder"

'aria-placeholder'?: string | undefined;

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

property "aria-posinset"

'aria-posinset'?: number | undefined;

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See Also
- aria-setsize.

property "aria-pressed"

'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;

Indicates the current "pressed" state of toggle buttons.
See Also
- aria-checked
- aria-selected.

property "aria-readonly"

'aria-readonly'?: Booleanish | undefined;

Indicates that the element is not editable, but is otherwise operable.
See Also
- aria-disabled.

property "aria-relevant"

'aria-relevant'?:
    | 'additions'
    | 'additions removals'
    | 'additions text'
    | 'all'
    | 'removals'
    | 'removals additions'
    | 'removals text'
    | 'text'
    | 'text additions'
    | 'text removals'
    | undefined;

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
See Also
- aria-atomic.

property "aria-required"

'aria-required'?: Booleanish | undefined;

Indicates that user input is required on the element before a form may be submitted.

property "aria-roledescription"

'aria-roledescription'?: string | undefined;

Defines a human-readable, author-localized description for the role of an element.

property "aria-rowcount"

'aria-rowcount'?: number | undefined;

Defines the total number of rows in a table, grid, or treegrid.
See Also
- aria-rowindex.

property "aria-rowindex"

'aria-rowindex'?: number | undefined;

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
See Also
- aria-rowcount
- aria-rowspan.

property "aria-rowindextext"

'aria-rowindextext'?: string | undefined;

Defines a human readable text alternative of aria-rowindex.
See Also
- aria-colindextext.

property "aria-rowspan"

'aria-rowspan'?: number | undefined;

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
See Also
- aria-rowindex
- aria-colspan.

property "aria-selected"

'aria-selected'?: Booleanish | undefined;

Indicates the current "selected" state of various widgets.
See Also
- aria-checked
- aria-pressed.

property "aria-setsize"

'aria-setsize'?: number | undefined;

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See Also
- aria-posinset.

property "aria-sort"

'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;

Indicates if items in a table or grid are sorted in ascending or descending order.

property "aria-valuemax"

'aria-valuemax'?: number | undefined;

Defines the maximum allowed value for a range widget.

property "aria-valuemin"

'aria-valuemin'?: number | undefined;

Defines the minimum allowed value for a range widget.

property "aria-valuenow"

'aria-valuenow'?: number | undefined;

Defines the current value for a range widget.
See Also
- aria-valuetext.

property "aria-valuetext"

'aria-valuetext'?: string | undefined;

Defines the human readable text alternative of aria-valuenow for a range widget.

interface AudioHTMLAttributes

interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}

interface BaseHTMLAttributes

interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {}

property href

href?: string | undefined;

property target

target?: string | undefined;

interface BaseSyntheticEvent

interface BaseSyntheticEvent<E = object, C = any, T = any> {}

property bubbles

bubbles: boolean;

property cancelable

cancelable: boolean;

property currentTarget

currentTarget: C;

property defaultPrevented

defaultPrevented: boolean;

property eventPhase

eventPhase: number;

property isTrusted

isTrusted: boolean;

property nativeEvent

nativeEvent: E;

property target

target: T;

property timeStamp

timeStamp: number;

property type

type: string;

method isDefaultPrevented

isDefaultPrevented: () => boolean;

method isPropagationStopped

isPropagationStopped: () => boolean;

method persist

persist: () => void;

method preventDefault

preventDefault: () => void;

method stopPropagation

stopPropagation: () => void;

interface BlockquoteHTMLAttributes

interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {}

property cite

cite?: string | undefined;

interface ButtonHTMLAttributes

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {}

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property formAction

formAction?:
    | string
    | ((formData: FormData) => void | Promise<void>)
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS]
    | undefined;

property formEncType

formEncType?: string | undefined;

property formMethod

formMethod?: string | undefined;

property formNoValidate

formNoValidate?: boolean | undefined;

property formTarget

formTarget?: string | undefined;

property name

name?: string | undefined;

property type

type?: 'submit' | 'reset' | 'button' | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface CanvasHTMLAttributes

interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {}

property height

height?: number | string | undefined;

property width

width?: number | string | undefined;

interface ChangeEvent

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {}

property target

target: EventTarget & T;

interface ClassAttributes

interface ClassAttributes<T> extends RefAttributes<T> {}

Represents the built-in attributes available to class components.

interface ClassicComponent

interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {}

See Also
Deprecated
Use ClassicComponent from create-react-class

method getInitialState

getInitialState: () => S;

method isMounted

isMounted: () => boolean;

method replaceState

replaceState: (nextState: S, callback?: () => void) => void;

interface ClassicComponentClass

interface ClassicComponentClass<P = {}> extends ComponentClass<P> {}

See Also
Deprecated
Use ClassicComponentClass from create-react-class

method getDefaultProps

getDefaultProps: () => P;

construct signature

new (props: P): ClassicComponent<P, ComponentState>;

interface ClipboardEvent

interface ClipboardEvent<T = Element>
    extends SyntheticEvent<T, NativeClipboardEvent> {}

property clipboardData

clipboardData: DataTransfer;

interface ColgroupHTMLAttributes

interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {}

property span

span?: number | undefined;

interface ColHTMLAttributes

interface ColHTMLAttributes<T> extends HTMLAttributes<T> {}

property span

span?: number | undefined;

property width

width?: number | string | undefined;

interface Component

interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}

interface ComponentClass

interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {}

Represents a component class in React.
P The props the component accepts. S The internal state of the component.

property contextType

contextType?: Context<any> | undefined;

property defaultProps

defaultProps?: Partial<P> | undefined;

property displayName

displayName?: string | undefined;

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
See Also

property propTypes

propTypes?: any;

Ignored by React.
Deprecated
Only kept in types for backwards compatibility. Will be removed in a future major release.

construct signature

new (props: P): Component<P, S>;

interface ComponentElement

interface ComponentElement<P, T extends Component<P, ComponentState>>
    extends ReactElement<P, ComponentClass<P>> {}

Deprecated
Use ReactElement<P, React.ComponentClass<P>>

property ref

ref?: Ref<T> | undefined;

Deprecated
Use element.props.ref instead.

interface ComponentLifecycle

interface ComponentLifecycle<P, S, SS = any>
    extends NewLifecycle<P, S, SS>,
        DeprecatedLifecycle<P, S> {}

method componentDidCatch

componentDidCatch: (error: Error, errorInfo: ErrorInfo) => void;

Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

method componentDidMount

componentDidMount: () => void;

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

method componentWillUnmount

componentWillUnmount: () => void;

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.

method shouldComponentUpdate

shouldComponentUpdate: (
    nextProps: Readonly<P>,
    nextState: Readonly<S>
) => boolean;

Called to determine whether the change in props and state should trigger a re-render.
Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.
If false is returned, Component.render, componentWillUpdate and componentDidUpdate will not be called.

interface CompositionEvent

interface CompositionEvent<T = Element>
    extends SyntheticEvent<T, NativeCompositionEvent> {}

property data

data: string;

interface ConsumerProps

interface ConsumerProps<T> {}

Describes the props accepted by a Context Consumer.
T The type of the value the context provides.

property children

children: (value: T) => ReactNode;

interface Context

interface Context<T> extends Provider<T> {}

Context lets components pass information deep down without explicitly passing props.
Created from createContext
Example 1
import { createContext } from 'react'; const ThemeContext = createContext('light');
See Also

property Consumer

Consumer: Consumer<T>;

property displayName

displayName?: string | undefined;

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
See Also

property Provider

Provider: Provider<T>;

interface CSSProperties

interface CSSProperties extends CSS.Properties<string | number> {}

interface DataHTMLAttributes

interface DataHTMLAttributes<T> extends HTMLAttributes<T> {}

property value

value?: string | readonly string[] | number | undefined;

interface DelHTMLAttributes

interface DelHTMLAttributes<T> extends HTMLAttributes<T> {}

property cite

cite?: string | undefined;

property dateTime

dateTime?: string | undefined;

interface DeprecatedLifecycle

interface DeprecatedLifecycle<P, S> {}

method componentWillMount

componentWillMount: () => void;

Called immediately before mounting occurs, and before Component.render. Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use or the constructor instead; will stop working in React 17

method componentWillReceiveProps

componentWillReceiveProps: (nextProps: Readonly<P>) => 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 Component.setState generally does not trigger this method.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use static instead; will stop working in React 17

method componentWillUpdate

componentWillUpdate: (nextProps: Readonly<P>, nextState: Readonly<S>) => void;

Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component.setState here.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

Called immediately before mounting occurs, and before Component.render. Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use or the constructor instead

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: Readonly<P>) => 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 Component.setState generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use static instead

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: (
    nextProps: Readonly<P>,
    nextState: Readonly<S>
) => void;

Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component.setState here.
This method will not stop working in React 17.
Note: the presence of or prevents this from being invoked.
See Also
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
- https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use getSnapshotBeforeUpdate instead

interface DetailedReactHTMLElement

interface DetailedReactHTMLElement<
    P extends HTMLAttributes<T>,
    T extends HTMLElement
> extends DOMElement<P, T> {}

property type

type: HTMLElementType;

interface DetailsHTMLAttributes

interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {}

property name

name?: string | undefined;

property open

open?: boolean | undefined;

interface DialogHTMLAttributes

interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {}

property onCancel

onCancel?: ReactEventHandler<T> | undefined;

property onClose

onClose?: ReactEventHandler<T> | undefined;

property open

open?: boolean | undefined;

interface DirectionalSuspenseListProps

interface DirectionalSuspenseListProps extends SuspenseListCommonProps {}

property revealOrder

revealOrder: 'forwards' | 'backwards';

Defines the order in which the SuspenseList children should be revealed.

property tail

tail?: SuspenseListTailMode | undefined;

Dictates how unloaded items in a SuspenseList is shown.
- By default, SuspenseList will show all fallbacks in the list. - collapsed shows only the next fallback in the list. - hidden doesn’t show any unloaded items.

interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES

interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {}

interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS

interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {}

For internal usage only. 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

interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}

Different release channels declare additional types of ReactNode this particular release channel accepts. App or library types should never augment this interface.

interface DOMAttributes

interface DOMAttributes<T> {}

property children

children?: ReactNode | undefined;

property dangerouslySetInnerHTML

dangerouslySetInnerHTML?:
    | {
          // Should be InnerHTML['innerHTML'].
          // But unfortunately we're mixing renderer-specific type declarations.
          __html: string | TrustedHTML;
      }
    | undefined;

property onAbort

onAbort?: ReactEventHandler<T> | undefined;

property onAbortCapture

onAbortCapture?: ReactEventHandler<T> | undefined;

property onAnimationEnd

onAnimationEnd?: AnimationEventHandler<T> | undefined;

property onAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<T> | undefined;

property onAnimationIteration

onAnimationIteration?: AnimationEventHandler<T> | undefined;

property onAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<T> | undefined;

property onAnimationStart

onAnimationStart?: AnimationEventHandler<T> | undefined;

property onAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<T> | undefined;

property onAuxClick

onAuxClick?: MouseEventHandler<T> | undefined;

property onAuxClickCapture

onAuxClickCapture?: MouseEventHandler<T> | undefined;

property onBeforeInput

onBeforeInput?: FormEventHandler<T> | undefined;

property onBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<T> | undefined;

property onBeforeToggle

onBeforeToggle?: ToggleEventHandler<T> | undefined;

property onBlur

onBlur?: FocusEventHandler<T> | undefined;

property onBlurCapture

onBlurCapture?: FocusEventHandler<T> | undefined;

property onCanPlay

onCanPlay?: ReactEventHandler<T> | undefined;

property onCanPlayCapture

onCanPlayCapture?: ReactEventHandler<T> | undefined;

property onCanPlayThrough

onCanPlayThrough?: ReactEventHandler<T> | undefined;

property onCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<T> | undefined;

property onChange

onChange?: FormEventHandler<T> | undefined;

property onChangeCapture

onChangeCapture?: FormEventHandler<T> | undefined;

property onClick

onClick?: MouseEventHandler<T> | undefined;

property onClickCapture

onClickCapture?: MouseEventHandler<T> | undefined;

property onCompositionEnd

onCompositionEnd?: CompositionEventHandler<T> | undefined;

property onCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<T> | undefined;

property onCompositionStart

onCompositionStart?: CompositionEventHandler<T> | undefined;

property onCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<T> | undefined;

property onCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<T> | undefined;

property onCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<T> | undefined;

property onContextMenu

onContextMenu?: MouseEventHandler<T> | undefined;

property onContextMenuCapture

onContextMenuCapture?: MouseEventHandler<T> | undefined;

property onCopy

onCopy?: ClipboardEventHandler<T> | undefined;

property onCopyCapture

onCopyCapture?: ClipboardEventHandler<T> | undefined;

property onCut

onCut?: ClipboardEventHandler<T> | undefined;

property onCutCapture

onCutCapture?: ClipboardEventHandler<T> | undefined;

property onDoubleClick

onDoubleClick?: MouseEventHandler<T> | undefined;

property onDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<T> | undefined;

property onDrag

onDrag?: DragEventHandler<T> | undefined;

property onDragCapture

onDragCapture?: DragEventHandler<T> | undefined;

property onDragEnd

onDragEnd?: DragEventHandler<T> | undefined;

property onDragEndCapture

onDragEndCapture?: DragEventHandler<T> | undefined;

property onDragEnter

onDragEnter?: DragEventHandler<T> | undefined;

property onDragEnterCapture

onDragEnterCapture?: DragEventHandler<T> | undefined;

property onDragExit

onDragExit?: DragEventHandler<T> | undefined;

property onDragExitCapture

onDragExitCapture?: DragEventHandler<T> | undefined;

property onDragLeave

onDragLeave?: DragEventHandler<T> | undefined;

property onDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<T> | undefined;

property onDragOver

onDragOver?: DragEventHandler<T> | undefined;

property onDragOverCapture

onDragOverCapture?: DragEventHandler<T> | undefined;

property onDragStart

onDragStart?: DragEventHandler<T> | undefined;

property onDragStartCapture

onDragStartCapture?: DragEventHandler<T> | undefined;

property onDrop

onDrop?: DragEventHandler<T> | undefined;

property onDropCapture

onDropCapture?: DragEventHandler<T> | undefined;

property onDurationChange

onDurationChange?: ReactEventHandler<T> | undefined;

property onDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<T> | undefined;

property onEmptied

onEmptied?: ReactEventHandler<T> | undefined;

property onEmptiedCapture

onEmptiedCapture?: ReactEventHandler<T> | undefined;

property onEncrypted

onEncrypted?: ReactEventHandler<T> | undefined;

property onEncryptedCapture

onEncryptedCapture?: ReactEventHandler<T> | undefined;

property onEnded

onEnded?: ReactEventHandler<T> | undefined;

property onEndedCapture

onEndedCapture?: ReactEventHandler<T> | undefined;

property onError

onError?: ReactEventHandler<T> | undefined;

property onErrorCapture

onErrorCapture?: ReactEventHandler<T> | undefined;

property onFocus

onFocus?: FocusEventHandler<T> | undefined;

property onFocusCapture

onFocusCapture?: FocusEventHandler<T> | undefined;

property onGotPointerCapture

onGotPointerCapture?: PointerEventHandler<T> | undefined;

property onGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined;

property onInput

onInput?: FormEventHandler<T> | undefined;

property onInputCapture

onInputCapture?: FormEventHandler<T> | undefined;

property onInvalid

onInvalid?: FormEventHandler<T> | undefined;

property onInvalidCapture

onInvalidCapture?: FormEventHandler<T> | undefined;

property onKeyDown

onKeyDown?: KeyboardEventHandler<T> | undefined;

property onKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<T> | undefined;

property onKeyPress

onKeyPress?: KeyboardEventHandler<T> | undefined;

Deprecated
Use onKeyUp or onKeyDown instead

property onKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<T> | undefined;

Deprecated
Use onKeyUpCapture or onKeyDownCapture instead

property onKeyUp

onKeyUp?: KeyboardEventHandler<T> | undefined;

property onKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<T> | undefined;

property onLoad

onLoad?: ReactEventHandler<T> | undefined;

property onLoadCapture

onLoadCapture?: ReactEventHandler<T> | undefined;

property onLoadedData

onLoadedData?: ReactEventHandler<T> | undefined;

property onLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<T> | undefined;

property onLoadedMetadata

onLoadedMetadata?: ReactEventHandler<T> | undefined;

property onLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<T> | undefined;

property onLoadStart

onLoadStart?: ReactEventHandler<T> | undefined;

property onLoadStartCapture

onLoadStartCapture?: ReactEventHandler<T> | undefined;

property onLostPointerCapture

onLostPointerCapture?: PointerEventHandler<T> | undefined;

property onLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined;

property onMouseDown

onMouseDown?: MouseEventHandler<T> | undefined;

property onMouseDownCapture

onMouseDownCapture?: MouseEventHandler<T> | undefined;

property onMouseEnter

onMouseEnter?: MouseEventHandler<T> | undefined;

property onMouseLeave

onMouseLeave?: MouseEventHandler<T> | undefined;

property onMouseMove

onMouseMove?: MouseEventHandler<T> | undefined;

property onMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<T> | undefined;

property onMouseOut

onMouseOut?: MouseEventHandler<T> | undefined;

property onMouseOutCapture

onMouseOutCapture?: MouseEventHandler<T> | undefined;

property onMouseOver

onMouseOver?: MouseEventHandler<T> | undefined;

property onMouseOverCapture

onMouseOverCapture?: MouseEventHandler<T> | undefined;

property onMouseUp

onMouseUp?: MouseEventHandler<T> | undefined;

property onMouseUpCapture

onMouseUpCapture?: MouseEventHandler<T> | undefined;

property onPaste

onPaste?: ClipboardEventHandler<T> | undefined;

property onPasteCapture

onPasteCapture?: ClipboardEventHandler<T> | undefined;

property onPause

onPause?: ReactEventHandler<T> | undefined;

property onPauseCapture

onPauseCapture?: ReactEventHandler<T> | undefined;

property onPlay

onPlay?: ReactEventHandler<T> | undefined;

property onPlayCapture

onPlayCapture?: ReactEventHandler<T> | undefined;

property onPlaying

onPlaying?: ReactEventHandler<T> | undefined;

property onPlayingCapture

onPlayingCapture?: ReactEventHandler<T> | undefined;

property onPointerCancel

onPointerCancel?: PointerEventHandler<T> | undefined;

property onPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<T> | undefined;

property onPointerDown

onPointerDown?: PointerEventHandler<T> | undefined;

property onPointerDownCapture

onPointerDownCapture?: PointerEventHandler<T> | undefined;

property onPointerEnter

onPointerEnter?: PointerEventHandler<T> | undefined;

property onPointerLeave

onPointerLeave?: PointerEventHandler<T> | undefined;

property onPointerMove

onPointerMove?: PointerEventHandler<T> | undefined;

property onPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<T> | undefined;

property onPointerOut

onPointerOut?: PointerEventHandler<T> | undefined;

property onPointerOutCapture

onPointerOutCapture?: PointerEventHandler<T> | undefined;

property onPointerOver

onPointerOver?: PointerEventHandler<T> | undefined;

property onPointerOverCapture

onPointerOverCapture?: PointerEventHandler<T> | undefined;

property onPointerUp

onPointerUp?: PointerEventHandler<T> | undefined;

property onPointerUpCapture

onPointerUpCapture?: PointerEventHandler<T> | undefined;

property onProgress

onProgress?: ReactEventHandler<T> | undefined;

property onProgressCapture

onProgressCapture?: ReactEventHandler<T> | undefined;

property onRateChange

onRateChange?: ReactEventHandler<T> | undefined;

property onRateChangeCapture

onRateChangeCapture?: ReactEventHandler<T> | undefined;

property onReset

onReset?: FormEventHandler<T> | undefined;

property onResetCapture

onResetCapture?: FormEventHandler<T> | undefined;

property onResize

onResize?: ReactEventHandler<T> | undefined;

property onResizeCapture

onResizeCapture?: ReactEventHandler<T> | undefined;

property onScroll

onScroll?: UIEventHandler<T> | undefined;

property onScrollCapture

onScrollCapture?: UIEventHandler<T> | undefined;

property onSeeked

onSeeked?: ReactEventHandler<T> | undefined;

property onSeekedCapture

onSeekedCapture?: ReactEventHandler<T> | undefined;

property onSeeking

onSeeking?: ReactEventHandler<T> | undefined;

property onSeekingCapture

onSeekingCapture?: ReactEventHandler<T> | undefined;

property onSelect

onSelect?: ReactEventHandler<T> | undefined;

property onSelectCapture

onSelectCapture?: ReactEventHandler<T> | undefined;

property onStalled

onStalled?: ReactEventHandler<T> | undefined;

property onStalledCapture

onStalledCapture?: ReactEventHandler<T> | undefined;

property onSubmit

onSubmit?: FormEventHandler<T> | undefined;

property onSubmitCapture

onSubmitCapture?: FormEventHandler<T> | undefined;

property onSuspend

onSuspend?: ReactEventHandler<T> | undefined;

property onSuspendCapture

onSuspendCapture?: ReactEventHandler<T> | undefined;

property onTimeUpdate

onTimeUpdate?: ReactEventHandler<T> | undefined;

property onTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<T> | undefined;

property onToggle

onToggle?: ToggleEventHandler<T> | undefined;

property onTouchCancel

onTouchCancel?: TouchEventHandler<T> | undefined;

property onTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<T> | undefined;

property onTouchEnd

onTouchEnd?: TouchEventHandler<T> | undefined;

property onTouchEndCapture

onTouchEndCapture?: TouchEventHandler<T> | undefined;

property onTouchMove

onTouchMove?: TouchEventHandler<T> | undefined;

property onTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<T> | undefined;

property onTouchStart

onTouchStart?: TouchEventHandler<T> | undefined;

property onTouchStartCapture

onTouchStartCapture?: TouchEventHandler<T> | undefined;

property onTransitionCancel

onTransitionCancel?: TransitionEventHandler<T> | undefined;

property onTransitionCancelCapture

onTransitionCancelCapture?: TransitionEventHandler<T> | undefined;

property onTransitionEnd

onTransitionEnd?: TransitionEventHandler<T> | undefined;

property onTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<T> | undefined;

property onTransitionRun

onTransitionRun?: TransitionEventHandler<T> | undefined;

property onTransitionRunCapture

onTransitionRunCapture?: TransitionEventHandler<T> | undefined;

property onTransitionStart

onTransitionStart?: TransitionEventHandler<T> | undefined;

property onTransitionStartCapture

onTransitionStartCapture?: TransitionEventHandler<T> | undefined;

property onVolumeChange

onVolumeChange?: ReactEventHandler<T> | undefined;

property onVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<T> | undefined;

property onWaiting

onWaiting?: ReactEventHandler<T> | undefined;

property onWaitingCapture

onWaitingCapture?: ReactEventHandler<T> | undefined;

property onWheel

onWheel?: WheelEventHandler<T> | undefined;

property onWheelCapture

onWheelCapture?: WheelEventHandler<T> | undefined;

interface DOMElement

interface DOMElement<
    P extends HTMLAttributes<T> | SVGAttributes<T>,
    T extends Element
> extends ReactElement<P, string> {}

Deprecated
Use ReactElement<P, string>

property ref

ref: Ref<T>;

Deprecated
Use element.props.ref instead.

interface DragEvent

interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {}

property dataTransfer

dataTransfer: DataTransfer;

interface EmbedHTMLAttributes

interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {}

property height

height?: number | string | undefined;

property src

src?: string | undefined;

property type

type?: string | undefined;

property width

width?: number | string | undefined;

interface ErrorInfo

interface ErrorInfo {}

property componentStack

componentStack?: string | null;

Captures which component contained the exception, and its ancestors.

property digest

digest?: string | null;

interface ExoticComponent

interface ExoticComponent<P = {}> {}

An object masquerading as a component. These are created by functions like forwardRef, memo, and 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.
P The props the component accepts.

property $$typeof

readonly $$typeof: symbol;

call signature

(props: P): ReactNode;

interface FieldsetHTMLAttributes

interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {}

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property name

name?: string | undefined;

interface FocusEvent

interface FocusEvent<Target = Element, RelatedTarget = Element>
    extends SyntheticEvent<Target, NativeFocusEvent> {}

property relatedTarget

relatedTarget: (EventTarget & RelatedTarget) | null;

property target

target: EventTarget & Target;

interface FormEvent

interface FormEvent<T = Element> extends SyntheticEvent<T> {}

interface FormHTMLAttributes

interface FormHTMLAttributes<T> extends HTMLAttributes<T> {}

property acceptCharset

acceptCharset?: string | undefined;

property action

action?:
    | string
    | undefined
    | ((formData: FormData) => void | Promise<void>)
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];

property autoComplete

autoComplete?: string | undefined;

property encType

encType?: string | undefined;

property method

method?: string | undefined;

property name

name?: string | undefined;

property noValidate

noValidate?: boolean | undefined;

property target

target?: string | undefined;

interface ForwardRefExoticComponent

interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {}

The type of the component returned from forwardRef.
P The props the component accepts, if any.
See Also
- ExoticComponent

property propTypes

propTypes?: any;

Ignored by React.
Deprecated
Only kept in types for backwards compatibility. Will be removed in a future major release.

interface ForwardRefRenderFunction

interface ForwardRefRenderFunction<T, P = {}> {}

The type of the function passed to forwardRef. This is considered different to a normal FunctionComponent because it receives an additional argument,
Parameter props
Props passed to the component, if any.
Parameter ref
A ref forwarded to the component of type ForwardedRef.
T The type of the forwarded ref. P The type of the props the component accepts.
See Also
- forwardRef

property displayName

displayName?: string | undefined;

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 Also

property propTypes

propTypes?: any;

Ignored by React.
Deprecated
Only kept in types for backwards compatibility. Will be removed in a future major release.

call signature

(props: P, ref: ForwardedRef<T>): ReactNode;

interface FunctionComponent

interface FunctionComponent<P = {}> {}

Represents the type of a function component. Can optionally receive a type argument that represents the props the component accepts.

P The props the component accepts.

Example 1

// With props:
type Props = { name: string }

const MyComponent: FunctionComponent<Props> = (props) => {
 return <div>{props.name}</div>
}

Example 2

// Without props:
const MyComponentWithoutProps: FunctionComponent = () => {
  return <div>MyComponentWithoutProps</div>
}

property displayName

displayName?: string | undefined;

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
Example 1
const MyComponent: FC = () => { return <div>Hello!</div> } MyComponent.displayName = 'MyAwesomeComponent'
See Also

property propTypes

propTypes?: any;

Ignored by React.
Deprecated
Only kept in types for backwards compatibility. Will be removed in a future major release.

call signature

(props: P): ReactNode | Promise<ReactNode>;

interface FunctionComponentElement

interface FunctionComponentElement<P>
    extends ReactElement<P, FunctionComponent<P>> {}

Deprecated
Use ReactElement<P, React.FunctionComponent<P>>

property ref

ref?:
    | ('ref' extends keyof P
          ? P extends { ref?: infer R | undefined }
              ? R
              : never
          : never)
    | undefined;

Deprecated
Use element.props.ref instead.

interface GestureProvider

interface GestureProvider {}

interface HTMLAttributes

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {}

property about

about?: string | undefined;

property accessKey

accessKey?: string | undefined;

property autoCapitalize

autoCapitalize?:
    | 'off'
    | 'none'
    | 'on'
    | 'sentences'
    | 'words'
    | 'characters'
    | undefined
    | (string & {});

property autoCorrect

autoCorrect?: string | undefined;

property autoFocus

autoFocus?: boolean | undefined;

property autoSave

autoSave?: string | undefined;

property className

className?: string | undefined;

property color

color?: string | undefined;

property content

content?: string | undefined;

property contentEditable

contentEditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined;

property contextMenu

contextMenu?: string | undefined;

property datatype

datatype?: string | undefined;

property defaultChecked

defaultChecked?: boolean | undefined;

property defaultValue

defaultValue?: string | number | readonly string[] | undefined;

property dir

dir?: string | undefined;

property draggable

draggable?: Booleanish | undefined;

property enterKeyHint

enterKeyHint?:
    | 'enter'
    | 'done'
    | 'go'
    | 'next'
    | 'previous'
    | 'search'
    | 'send'
    | undefined;

property hidden

hidden?: boolean | undefined;

property id

id?: string | undefined;

property inert

inert?: boolean | undefined;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

property inlist

inlist?: any;

property inputMode

inputMode?:
    | 'none'
    | 'text'
    | 'tel'
    | 'url'
    | 'email'
    | 'numeric'
    | 'decimal'
    | 'search'
    | undefined;

Hints at the type of data that might be entered by the user while editing the element or its contents
See Also
- https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

property is

is?: string | undefined;

Specify that a standard HTML element should behave like a defined custom built-in element
See Also
- https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

property itemID

itemID?: string | undefined;

property itemProp

itemProp?: string | undefined;

property itemRef

itemRef?: string | undefined;

property itemScope

itemScope?: boolean | undefined;

property itemType

itemType?: string | undefined;

property lang

lang?: string | undefined;

property nonce

nonce?: string | undefined;

property popover

popover?: '' | 'auto' | 'manual' | undefined;

property popoverTarget

popoverTarget?: string | undefined;

property popoverTargetAction

popoverTargetAction?: 'toggle' | 'show' | 'hide' | undefined;

property prefix

prefix?: string | undefined;

property property

property?: string | undefined;

property radioGroup

radioGroup?: string | undefined;

property rel

rel?: string | undefined;

property resource

resource?: string | undefined;

property results

results?: number | undefined;

property rev

rev?: string | undefined;

property role

role?: AriaRole | undefined;

property security

security?: string | undefined;

property slot

slot?: string | undefined;

property spellCheck

spellCheck?: Booleanish | undefined;

property style

style?: CSSProperties | undefined;

property suppressContentEditableWarning

suppressContentEditableWarning?: boolean | undefined;

property suppressHydrationWarning

suppressHydrationWarning?: boolean | undefined;

property tabIndex

tabIndex?: number | undefined;

property title

title?: string | undefined;

property translate

translate?: 'yes' | 'no' | undefined;

property typeof

typeof?: string | undefined;

property unselectable

unselectable?: 'on' | 'off' | undefined;

property vocab

vocab?: string | undefined;

interface HtmlHTMLAttributes

interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {}

property manifest

manifest?: string | undefined;

interface HTMLProps

interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {}

interface IframeHTMLAttributes

interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {}

property allow

allow?: string | undefined;

property allowFullScreen

allowFullScreen?: boolean | undefined;

property allowTransparency

allowTransparency?: boolean | undefined;

property frameBorder

frameBorder?: number | string | undefined;

Deprecated

property height

height?: number | string | undefined;

property loading

loading?: 'eager' | 'lazy' | undefined;

property marginHeight

marginHeight?: number | undefined;

Deprecated

property marginWidth

marginWidth?: number | undefined;

Deprecated

property name

name?: string | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property sandbox

sandbox?: string | undefined;

property scrolling

scrolling?: string | undefined;

Deprecated

property seamless

seamless?: boolean | undefined;

property src

src?: string | undefined;

property srcDoc

srcDoc?: string | undefined;

property width

width?: number | string | undefined;

interface ImgHTMLAttributes

interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {}

property alt

alt?: string | undefined;

property crossOrigin

crossOrigin?: CrossOrigin;

property decoding

decoding?: 'async' | 'auto' | 'sync' | undefined;

property fetchPriority

fetchPriority?: 'high' | 'low' | 'auto';

property height

height?: number | string | undefined;

property loading

loading?: 'eager' | 'lazy' | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property sizes

sizes?: string | undefined;

property src

src?: string | undefined;

property srcSet

srcSet?: string | undefined;

property useMap

useMap?: string | undefined;

property width

width?: number | string | undefined;

interface InputHTMLAttributes

interface InputHTMLAttributes<T> extends HTMLAttributes<T> {}

property accept

accept?: string | undefined;

property alt

alt?: string | undefined;

property autoComplete

autoComplete?: HTMLInputAutoCompleteAttribute | undefined;

property capture

capture?: boolean | 'user' | 'environment' | undefined;

property checked

checked?: boolean | undefined;

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property formAction

formAction?:
    | string
    | ((formData: FormData) => void | Promise<void>)
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS]
    | undefined;

property formEncType

formEncType?: string | undefined;

property formMethod

formMethod?: string | undefined;

property formNoValidate

formNoValidate?: boolean | undefined;

property formTarget

formTarget?: string | undefined;

property height

height?: number | string | undefined;

property list

list?: string | undefined;

property max

max?: number | string | undefined;

property maxLength

maxLength?: number | undefined;

property min

min?: number | string | undefined;

property minLength

minLength?: number | undefined;

property multiple

multiple?: boolean | undefined;

property name

name?: string | undefined;

property onChange

onChange?: ChangeEventHandler<T> | undefined;

property pattern

pattern?: string | undefined;

property placeholder

placeholder?: string | undefined;

property readOnly

readOnly?: boolean | undefined;

property required

required?: boolean | undefined;

property size

size?: number | undefined;

property src

src?: string | undefined;

property step

step?: number | string | undefined;

property type

type?: HTMLInputTypeAttribute | undefined;

property value

value?: string | readonly string[] | number | undefined;

property width

width?: number | string | undefined;

interface InsHTMLAttributes

interface InsHTMLAttributes<T> extends HTMLAttributes<T> {}

property cite

cite?: string | undefined;

property dateTime

dateTime?: string | undefined;

interface InvalidEvent

interface InvalidEvent<T = Element> extends SyntheticEvent<T> {}

property target

target: EventTarget & T;

interface KeyboardEvent

interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {}

property altKey

altKey: boolean;

property charCode

charCode: number;

Deprecated

property code

code: string;

property ctrlKey

ctrlKey: boolean;

property key

key: string;

See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values

property keyCode

keyCode: number;

Deprecated

property locale

locale: string;

property location

location: number;

property metaKey

metaKey: boolean;

property repeat

repeat: boolean;

property shiftKey

shiftKey: boolean;

property which

which: number;

Deprecated

method getModifierState

getModifierState: (key: ModifierKey) => boolean;

See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.

interface KeygenHTMLAttributes

interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {}

property challenge

challenge?: string | undefined;

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property keyParams

keyParams?: string | undefined;

property keyType

keyType?: string | undefined;

property name

name?: string | undefined;

interface LabelHTMLAttributes

interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {}

property form

form?: string | undefined;

property htmlFor

htmlFor?: string | undefined;

interface LazyExoticComponent

interface LazyExoticComponent<T extends ComponentType<any>>
    extends ExoticComponent<CustomComponentPropsWithRef<T>> {}

interface LiHTMLAttributes

interface LiHTMLAttributes<T> extends HTMLAttributes<T> {}

property value

value?: string | readonly string[] | number | undefined;

interface LinkHTMLAttributes

interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {}

property as

as?: string | undefined;

property charSet

charSet?: string | undefined;

property crossOrigin

crossOrigin?: CrossOrigin;

property fetchPriority

fetchPriority?: 'high' | 'low' | 'auto';

property href

href?: string | undefined;

property hrefLang

hrefLang?: string | undefined;

property imageSizes

imageSizes?: string | undefined;

property imageSrcSet

imageSrcSet?: string | undefined;

property integrity

integrity?: string | undefined;

property media

media?: string | undefined;

property precedence

precedence?: string | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property sizes

sizes?: string | undefined;

property type

type?: string | undefined;

interface MapHTMLAttributes

interface MapHTMLAttributes<T> extends HTMLAttributes<T> {}

property name

name?: string | undefined;

interface MediaHTMLAttributes

interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {}

property autoPlay

autoPlay?: boolean | undefined;

property controls

controls?: boolean | undefined;

property controlsList

controlsList?: string | undefined;

property crossOrigin

crossOrigin?: CrossOrigin;

property loop

loop?: boolean | undefined;

property mediaGroup

mediaGroup?: string | undefined;

property muted

muted?: boolean | undefined;

property playsInline

playsInline?: boolean | undefined;

property preload

preload?: string | undefined;

property src

src?: string | undefined;

interface MenuHTMLAttributes

interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {}

property type

type?: string | undefined;

interface MetaHTMLAttributes

interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {}

property charSet

charSet?: string | undefined;

property content

content?: string | undefined;

property httpEquiv

httpEquiv?: string | undefined;

property media

media?: string | undefined;

property name

name?: string | undefined;

interface MeterHTMLAttributes

interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {}

property form

form?: string | undefined;

property high

high?: number | undefined;

property low

low?: number | undefined;

property max

max?: number | string | undefined;

property min

min?: number | string | undefined;

property optimum

optimum?: number | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface MouseEvent

interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {}

property altKey

altKey: boolean;

property button

button: number;

property buttons

buttons: number;

property clientX

clientX: number;

property clientY

clientY: number;

property ctrlKey

ctrlKey: boolean;

property metaKey

metaKey: boolean;

property movementX

movementX: number;

property movementY

movementY: number;

property pageX

pageX: number;

property pageY

pageY: number;

property relatedTarget

relatedTarget: EventTarget | null;

property screenX

screenX: number;

property screenY

screenY: number;

property shiftKey

shiftKey: boolean;

method getModifierState

getModifierState: (key: ModifierKey) => boolean;

See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.

interface MutableRefObject

interface MutableRefObject<T> {}

Deprecated
Use RefObject instead.

property current

current: T;

interface NamedExoticComponent

interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {}

An ExoticComponent with a displayName property applied to it.
P The props the component accepts.

property displayName

displayName?: string | undefined;

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
See Also

interface NewLifecycle

interface NewLifecycle<P, S, SS> {}

method componentDidUpdate

componentDidUpdate: (
    prevProps: Readonly<P>,
    prevState: Readonly<S>,
    snapshot?: SS
) => void;

Called immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

method getSnapshotBeforeUpdate

getSnapshotBeforeUpdate: (
    prevProps: Readonly<P>,
    prevState: Readonly<S>
) => SS | null;

Runs before React applies the result of to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before causes changes to it.
Note: the presence of this method prevents any of the deprecated lifecycle events from running.

interface NonDirectionalSuspenseListProps

interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {}

property revealOrder

revealOrder?:
    | Exclude<
          SuspenseListRevealOrder,
          DirectionalSuspenseListProps['revealOrder']
      >
    | undefined;

Defines the order in which the SuspenseList children should be revealed.

property tail

tail?: never | undefined;

The tail property is invalid when not using the forwards or backwards reveal orders.

interface ObjectHTMLAttributes

interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {}

property classID

classID?: string | undefined;

property data

data?: string | undefined;

property form

form?: string | undefined;

property height

height?: number | string | undefined;

property name

name?: string | undefined;

property type

type?: string | undefined;

property useMap

useMap?: string | undefined;

property width

width?: number | string | undefined;

property wmode

wmode?: string | undefined;

interface OlHTMLAttributes

interface OlHTMLAttributes<T> extends HTMLAttributes<T> {}

property reversed

reversed?: boolean | undefined;

property start

start?: number | undefined;

property type

type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;

interface OptgroupHTMLAttributes

interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {}

property disabled

disabled?: boolean | undefined;

property label

label?: string | undefined;

interface OptionHTMLAttributes

interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {}

property disabled

disabled?: boolean | undefined;

property label

label?: string | undefined;

property selected

selected?: boolean | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface OutputHTMLAttributes

interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {}

property form

form?: string | undefined;

property htmlFor

htmlFor?: string | undefined;

property name

name?: string | undefined;

interface ParamHTMLAttributes

interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {}

property name

name?: string | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface PointerEvent

interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {}

property height

height: number;

property isPrimary

isPrimary: boolean;

property pointerId

pointerId: number;

property pointerType

pointerType: 'mouse' | 'pen' | 'touch';

property pressure

pressure: number;

property tangentialPressure

tangentialPressure: number;

property tiltX

tiltX: number;

property tiltY

tiltY: number;

property twist

twist: number;

property width

width: number;

interface ProfilerProps

interface ProfilerProps {}

The props accepted by Profiler.
See Also

property children

children?: ReactNode | undefined;

property id

id: string;

property onRender

onRender: ProfilerOnRenderCallback;

interface ProgressHTMLAttributes

interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {}

property max

max?: number | string | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface ProviderExoticComponent

interface ProviderExoticComponent<P> extends ExoticComponent<P> {}

An ExoticComponent with a propTypes property applied to it.
P The props the component accepts.

interface ProviderProps

interface ProviderProps<T> {}

Describes the props accepted by a Context Provider.
T The type of the value the context provides.

property children

children?: ReactNode | undefined;

property value

value: T;

interface QuoteHTMLAttributes

interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {}

property cite

cite?: string | undefined;

interface ReactComponentElement

interface ReactComponentElement<
    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
    P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>>
> extends ReactElement<P, Exclude<T, number>> {}

Deprecated

interface ReactElement

interface ReactElement<
    P = unknown,
    T extends string | JSXElementConstructor<any> =
        | string
        | JSXElementConstructor<any>
> {}

Represents a JSX element.
Where ReactNode represents everything that can be rendered, ReactElement only represents JSX.
P The type of the props object T The type of the component or tag
Example 1
const element: ReactElement = <div />;

property key

key: string | null;

property props

props: P;

property type

type: T;

interface ReactHTMLElement

interface ReactHTMLElement<T extends HTMLElement>
    extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> {}

interface ReactPortal

interface ReactPortal extends ReactElement {}

property children

children: ReactNode;

interface ReactSVGElement

interface ReactSVGElement
    extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {}

property type

type: SVGElementType;

interface RefAttributes

interface RefAttributes<T> extends Attributes {}

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.
const Component = forwardRef(() => <div />); <Component ref={(current) => console.log(current)} />
You only need this type if you manually author the types of props that need to be compatible with legacy refs.
interface Props extends React.RefAttributes<HTMLDivElement> {} declare const Component: React.FunctionComponent<Props>;
Otherwise it's simpler to directly use 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". RefAttributes is generally not safe to describe both consumer and seen props.
interface Props extends { ref?: React.Ref<HTMLDivElement> | undefined; } declare const Component: React.FunctionComponent<Props>;
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 Component would never have access to a ref with type string
const Component = (props: React.RefAttributes) => props.ref;

property ref

ref?: Ref<T> | undefined;

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 Also

interface RefObject

interface RefObject<T> {}

Created by createRef, or useRef when passed null.

T The type of the ref's value.

Example 1

const ref = createRef<HTMLDivElement>();

ref.current = document.createElement('div'); // Error

property current

current: T;

The current value of the ref.

interface ScriptHTMLAttributes

interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {}

property async

async?: boolean | undefined;

property charSet

charSet?: string | undefined;

Deprecated

property crossOrigin

crossOrigin?: CrossOrigin;

property defer

defer?: boolean | undefined;

property integrity

integrity?: string | undefined;

property noModule

noModule?: boolean | undefined;

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;

property src

src?: string | undefined;

property type

type?: string | undefined;

interface SelectHTMLAttributes

interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {}

property autoComplete

autoComplete?: string | undefined;

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property multiple

multiple?: boolean | undefined;

property name

name?: string | undefined;

property onChange

onChange?: ChangeEventHandler<T> | undefined;

property required

required?: boolean | undefined;

property size

size?: number | undefined;

property value

value?: string | readonly string[] | number | undefined;

interface SlotHTMLAttributes

interface SlotHTMLAttributes<T> extends HTMLAttributes<T> {}

property name

name?: string | undefined;

interface SourceHTMLAttributes

interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {}

property height

height?: number | string | undefined;

property media

media?: string | undefined;

property sizes

sizes?: string | undefined;

property src

src?: string | undefined;

property srcSet

srcSet?: string | undefined;

property type

type?: string | undefined;

property width

width?: number | string | undefined;

interface StaticLifecycle

interface StaticLifecycle<P, S> {}

property getDerivedStateFromError

getDerivedStateFromError?: GetDerivedStateFromError<P, S> | undefined;

property getDerivedStateFromProps

getDerivedStateFromProps?: GetDerivedStateFromProps<P, S> | undefined;

interface StyleHTMLAttributes

interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {}

property href

href?: string | undefined;

property media

media?: string | undefined;

property precedence

precedence?: string | undefined;

property scoped

scoped?: boolean | undefined;

property type

type?: string | undefined;

interface SuspenseListCommonProps

interface SuspenseListCommonProps {}

property children

children: ReactElement | Iterable<ReactElement>;

Note that SuspenseList require more than one child; it is a runtime warning to provide only a single child.
It does, however, allow those children to be wrapped inside a single level of <React.Fragment>.

interface SuspenseProps

interface SuspenseProps {}

The props accepted by Suspense.
See Also

property children

children?: ReactNode | undefined;

property fallback

fallback?: ReactNode;

A fallback react tree to show when a Suspense child (like React.lazy) suspends

property name

name?: string | undefined;

A name for this Suspense boundary for instrumentation purposes. The name will help identify this boundary in React DevTools.

interface SuspenseProps

interface SuspenseProps {}

property unstable_expectedLoadTime

unstable_expectedLoadTime?: number | undefined;

The presence of this prop indicates that the content is computationally expensive to render. In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
See Also
- https://github.com/facebook/react/pull/19936

interface SVGAttributes

interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {}

property accentHeight

accentHeight?: number | string | undefined;

property accumulate

accumulate?: 'none' | 'sum' | undefined;

property additive

additive?: 'replace' | 'sum' | undefined;

property alignmentBaseline

alignmentBaseline?:
    | 'auto'
    | 'baseline'
    | 'before-edge'
    | 'text-before-edge'
    | 'middle'
    | 'central'
    | 'after-edge'
    | 'text-after-edge'
    | 'ideographic'
    | 'alphabetic'
    | 'hanging'
    | 'mathematical'
    | 'inherit'
    | undefined;

property allowReorder

allowReorder?: 'no' | 'yes' | undefined;

property alphabetic

alphabetic?: number | string | undefined;

property amplitude

amplitude?: number | string | undefined;

property arabicForm

arabicForm?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined;

property ascent

ascent?: number | string | undefined;

property attributeName

attributeName?: string | undefined;

property attributeType

attributeType?: string | undefined;

property autoReverse

autoReverse?: Booleanish | undefined;

property azimuth

azimuth?: number | string | undefined;

property baseFrequency

baseFrequency?: number | string | undefined;

property baselineShift

baselineShift?: number | string | undefined;

property baseProfile

baseProfile?: number | string | undefined;

property bbox

bbox?: number | string | undefined;

property begin

begin?: number | string | undefined;

property bias

bias?: number | string | undefined;

property by

by?: number | string | undefined;

property calcMode

calcMode?: number | string | undefined;

property capHeight

capHeight?: number | string | undefined;

property className

className?: string | undefined;

property clip

clip?: number | string | undefined;

property clipPath

clipPath?: string | undefined;

property clipPathUnits

clipPathUnits?: number | string | undefined;

property clipRule

clipRule?: number | string | undefined;

property color

color?: string | undefined;

property colorInterpolation

colorInterpolation?: number | string | undefined;

property colorInterpolationFilters

colorInterpolationFilters?:
    | 'auto'
    | 'sRGB'
    | 'linearRGB'
    | 'inherit'
    | undefined;

property colorProfile

colorProfile?: number | string | undefined;

property colorRendering

colorRendering?: number | string | undefined;

property contentScriptType

contentScriptType?: number | string | undefined;

property contentStyleType

contentStyleType?: number | string | undefined;

property crossOrigin

crossOrigin?: CrossOrigin;

property cursor

cursor?: number | string | undefined;

property cx

cx?: number | string | undefined;

property cy

cy?: number | string | undefined;

property d

d?: string | undefined;

property decelerate

decelerate?: number | string | undefined;

property descent

descent?: number | string | undefined;

property diffuseConstant

diffuseConstant?: number | string | undefined;

property direction

direction?: number | string | undefined;

property display

display?: number | string | undefined;

property divisor

divisor?: number | string | undefined;

property dominantBaseline

dominantBaseline?: number | string | undefined;

property dur

dur?: number | string | undefined;

property dx

dx?: number | string | undefined;

property dy

dy?: number | string | undefined;

property edgeMode

edgeMode?: number | string | undefined;

property elevation

elevation?: number | string | undefined;

property enableBackground

enableBackground?: number | string | undefined;

property end

end?: number | string | undefined;

property exponent

exponent?: number | string | undefined;

property externalResourcesRequired

externalResourcesRequired?: Booleanish | undefined;

property fill

fill?: string | undefined;

property fillOpacity

fillOpacity?: number | string | undefined;

property fillRule

fillRule?: 'nonzero' | 'evenodd' | 'inherit' | undefined;

property filter

filter?: string | undefined;

property filterRes

filterRes?: number | string | undefined;

property filterUnits

filterUnits?: number | string | undefined;

property floodColor

floodColor?: number | string | undefined;

property floodOpacity

floodOpacity?: number | string | undefined;

property focusable

focusable?: Booleanish | 'auto' | undefined;

property fontFamily

fontFamily?: string | undefined;

property fontSize

fontSize?: number | string | undefined;

property fontSizeAdjust

fontSizeAdjust?: number | string | undefined;

property fontStretch

fontStretch?: number | string | undefined;

property fontStyle

fontStyle?: number | string | undefined;

property fontVariant

fontVariant?: number | string | undefined;

property fontWeight

fontWeight?: number | string | undefined;

property format

format?: number | string | undefined;

property fr

fr?: number | string | undefined;

property from

from?: number | string | undefined;

property fx

fx?: number | string | undefined;

property fy

fy?: number | string | undefined;

property g1

g1?: number | string | undefined;

property g2

g2?: number | string | undefined;

property glyphName

glyphName?: number | string | undefined;

property glyphOrientationHorizontal

glyphOrientationHorizontal?: number | string | undefined;

property glyphOrientationVertical

glyphOrientationVertical?: number | string | undefined;

property glyphRef

glyphRef?: number | string | undefined;

property gradientTransform

gradientTransform?: string | undefined;

property gradientUnits

gradientUnits?: string | undefined;

property hanging

hanging?: number | string | undefined;

property height

height?: number | string | undefined;

property horizAdvX

horizAdvX?: number | string | undefined;

property horizOriginX

horizOriginX?: number | string | undefined;

property href

href?: string | undefined;

property id

id?: string | undefined;

property ideographic

ideographic?: number | string | undefined;

property imageRendering

imageRendering?: number | string | undefined;

property in

in?: string | undefined;

property in2

in2?: number | string | undefined;

property intercept

intercept?: number | string | undefined;

property k

k?: number | string | undefined;

property k1

k1?: number | string | undefined;

property k2

k2?: number | string | undefined;

property k3

k3?: number | string | undefined;

property k4

k4?: number | string | undefined;

property kernelMatrix

kernelMatrix?: number | string | undefined;

property kernelUnitLength

kernelUnitLength?: number | string | undefined;

property kerning

kerning?: number | string | undefined;

property keyPoints

keyPoints?: number | string | undefined;

property keySplines

keySplines?: number | string | undefined;

property keyTimes

keyTimes?: number | string | undefined;

property lang

lang?: string | undefined;

property lengthAdjust

lengthAdjust?: number | string | undefined;

property letterSpacing

letterSpacing?: number | string | undefined;

property lightingColor

lightingColor?: number | string | undefined;

property limitingConeAngle

limitingConeAngle?: number | string | undefined;

property local

local?: number | string | undefined;

property markerEnd

markerEnd?: string | undefined;

property markerHeight

markerHeight?: number | string | undefined;

property markerMid

markerMid?: string | undefined;

property markerStart

markerStart?: string | undefined;

property markerUnits

markerUnits?: number | string | undefined;

property markerWidth

markerWidth?: number | string | undefined;

property mask

mask?: string | undefined;

property maskContentUnits

maskContentUnits?: number | string | undefined;

property maskUnits

maskUnits?: number | string | undefined;

property mathematical

mathematical?: number | string | undefined;

property max

max?: number | string | undefined;

property media

media?: string | undefined;

property method

method?: string | undefined;

property min

min?: number | string | undefined;

property mode

mode?: number | string | undefined;

property name

name?: string | undefined;

property numOctaves

numOctaves?: number | string | undefined;

property offset

offset?: number | string | undefined;

property opacity

opacity?: number | string | undefined;

property operator

operator?: number | string | undefined;

property order

order?: number | string | undefined;

property orient

orient?: number | string | undefined;

property orientation

orientation?: number | string | undefined;

property origin

origin?: number | string | undefined;

property overflow

overflow?: number | string | undefined;

property overlinePosition

overlinePosition?: number | string | undefined;

property overlineThickness

overlineThickness?: number | string | undefined;

property paintOrder

paintOrder?: number | string | undefined;

property panose1

panose1?: number | string | undefined;

property path

path?: string | undefined;

property pathLength

pathLength?: number | string | undefined;

property patternContentUnits

patternContentUnits?: string | undefined;

property patternTransform

patternTransform?: number | string | undefined;

property patternUnits

patternUnits?: string | undefined;

property pointerEvents

pointerEvents?: number | string | undefined;

property points

points?: string | undefined;

property pointsAtX

pointsAtX?: number | string | undefined;

property pointsAtY

pointsAtY?: number | string | undefined;

property pointsAtZ

pointsAtZ?: number | string | undefined;

property preserveAlpha

preserveAlpha?: Booleanish | undefined;

property preserveAspectRatio

preserveAspectRatio?: string | undefined;

property primitiveUnits

primitiveUnits?: number | string | undefined;

property r

r?: number | string | undefined;

property radius

radius?: number | string | undefined;

property refX

refX?: number | string | undefined;

property refY

refY?: number | string | undefined;

property renderingIntent

renderingIntent?: number | string | undefined;

property repeatCount

repeatCount?: number | string | undefined;

property repeatDur

repeatDur?: number | string | undefined;

property requiredExtensions

requiredExtensions?: number | string | undefined;

property requiredFeatures

requiredFeatures?: number | string | undefined;

property restart

restart?: number | string | undefined;

property result

result?: string | undefined;

property role

role?: AriaRole | undefined;

property rotate

rotate?: number | string | undefined;

property rx

rx?: number | string | undefined;

property ry

ry?: number | string | undefined;

property scale

scale?: number | string | undefined;

property seed

seed?: number | string | undefined;

property shapeRendering

shapeRendering?: number | string | undefined;

property slope

slope?: number | string | undefined;

property spacing

spacing?: number | string | undefined;

property specularConstant

specularConstant?: number | string | undefined;

property specularExponent

specularExponent?: number | string | undefined;

property speed

speed?: number | string | undefined;

property spreadMethod

spreadMethod?: string | undefined;

property startOffset

startOffset?: number | string | undefined;

property stdDeviation

stdDeviation?: number | string | undefined;

property stemh

stemh?: number | string | undefined;

property stemv

stemv?: number | string | undefined;

property stitchTiles

stitchTiles?: number | string | undefined;

property stopColor

stopColor?: string | undefined;

property stopOpacity

stopOpacity?: number | string | undefined;

property strikethroughPosition

strikethroughPosition?: number | string | undefined;

property strikethroughThickness

strikethroughThickness?: number | string | undefined;

property string

string?: number | string | undefined;

property stroke

stroke?: string | undefined;

property strokeDasharray

strokeDasharray?: string | number | undefined;

property strokeDashoffset

strokeDashoffset?: string | number | undefined;

property strokeLinecap

strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit' | undefined;

property strokeLinejoin

strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined;

property strokeMiterlimit

strokeMiterlimit?: number | string | undefined;

property strokeOpacity

strokeOpacity?: number | string | undefined;

property strokeWidth

strokeWidth?: number | string | undefined;

property style

style?: CSSProperties | undefined;

property suppressHydrationWarning

suppressHydrationWarning?: boolean | undefined;

property surfaceScale

surfaceScale?: number | string | undefined;

property systemLanguage

systemLanguage?: number | string | undefined;

property tabIndex

tabIndex?: number | undefined;

property tableValues

tableValues?: number | string | undefined;

property target

target?: string | undefined;

property targetX

targetX?: number | string | undefined;

property targetY

targetY?: number | string | undefined;

property textAnchor

textAnchor?: string | undefined;

property textDecoration

textDecoration?: number | string | undefined;

property textLength

textLength?: number | string | undefined;

property textRendering

textRendering?: number | string | undefined;

property to

to?: number | string | undefined;

property transform

transform?: string | undefined;

property type

type?: string | undefined;

property u1

u1?: number | string | undefined;

property u2

u2?: number | string | undefined;

property underlinePosition

underlinePosition?: number | string | undefined;

property underlineThickness

underlineThickness?: number | string | undefined;

property unicode

unicode?: number | string | undefined;

property unicodeBidi

unicodeBidi?: number | string | undefined;

property unicodeRange

unicodeRange?: number | string | undefined;

property unitsPerEm

unitsPerEm?: number | string | undefined;

property vAlphabetic

vAlphabetic?: number | string | undefined;

property values

values?: string | undefined;

property vectorEffect

vectorEffect?: number | string | undefined;

property version

version?: string | undefined;

property vertAdvY

vertAdvY?: number | string | undefined;

property vertOriginX

vertOriginX?: number | string | undefined;

property vertOriginY

vertOriginY?: number | string | undefined;

property vHanging

vHanging?: number | string | undefined;

property vIdeographic

vIdeographic?: number | string | undefined;

property viewBox

viewBox?: string | undefined;

property viewTarget

viewTarget?: number | string | undefined;

property visibility

visibility?: number | string | undefined;

property vMathematical

vMathematical?: number | string | undefined;

property width

width?: number | string | undefined;

property widths

widths?: number | string | undefined;

property wordSpacing

wordSpacing?: number | string | undefined;

property writingMode

writingMode?: number | string | undefined;

property x

x?: number | string | undefined;

property x1

x1?: number | string | undefined;

property x2

x2?: number | string | undefined;

property xChannelSelector

xChannelSelector?: string | undefined;

property xHeight

xHeight?: number | string | undefined;

property xlinkActuate

xlinkActuate?: string | undefined;

property xlinkArcrole

xlinkArcrole?: string | undefined;

property xlinkHref

xlinkHref?: string | undefined;

property xlinkRole

xlinkRole?: string | undefined;

property xlinkShow

xlinkShow?: string | undefined;

property xlinkTitle

xlinkTitle?: string | undefined;

property xlinkType

xlinkType?: string | undefined;

property xmlBase

xmlBase?: string | undefined;

property xmlLang

xmlLang?: string | undefined;

property xmlns

xmlns?: string | undefined;

property xmlnsXlink

xmlnsXlink?: string | undefined;

property xmlSpace

xmlSpace?: string | undefined;

property y

y?: number | string | undefined;

property y1

y1?: number | string | undefined;

property y2

y2?: number | string | undefined;

property yChannelSelector

yChannelSelector?: string | undefined;

property z

z?: number | string | undefined;

property zoomAndPan

zoomAndPan?: string | undefined;

interface SVGLineElementAttributes

interface SVGLineElementAttributes<T> extends SVGProps<T> {}

interface SVGProps

interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {}

interface SVGTextElementAttributes

interface SVGTextElementAttributes<T> extends SVGProps<T> {}

interface SyntheticEvent

interface SyntheticEvent<T = Element, E = Event>
    extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

currentTarget - a reference to the element on which the event listener is registered.
target - a reference to the element from which the event was originally dispatched. This might be a child element to the element on which the event listener is registered. If you thought this should be EventTarget & T, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682

interface TableHTMLAttributes

interface TableHTMLAttributes<T> extends HTMLAttributes<T> {}

property align

align?: 'left' | 'center' | 'right' | undefined;

property bgcolor

bgcolor?: string | undefined;

property border

border?: number | undefined;

property cellPadding

cellPadding?: number | string | undefined;

property cellSpacing

cellSpacing?: number | string | undefined;

property frame

frame?: boolean | undefined;

property rules

rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | undefined;

property summary

summary?: string | undefined;

property width

width?: number | string | undefined;

interface TdHTMLAttributes

interface TdHTMLAttributes<T> extends HTMLAttributes<T> {}

property abbr

abbr?: string | undefined;

property align

align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined;

property colSpan

colSpan?: number | undefined;

property headers

headers?: string | undefined;

property height

height?: number | string | undefined;

property rowSpan

rowSpan?: number | undefined;

property scope

scope?: string | undefined;

property valign

valign?: 'top' | 'middle' | 'bottom' | 'baseline' | undefined;

property width

width?: number | string | undefined;

interface TextareaHTMLAttributes

interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {}

property autoComplete

autoComplete?: string | undefined;

property cols

cols?: number | undefined;

property dirName

dirName?: string | undefined;

property disabled

disabled?: boolean | undefined;

property form

form?: string | undefined;

property maxLength

maxLength?: number | undefined;

property minLength

minLength?: number | undefined;

property name

name?: string | undefined;

property onChange

onChange?: ChangeEventHandler<T> | undefined;

property placeholder

placeholder?: string | undefined;

property readOnly

readOnly?: boolean | undefined;

property required

required?: boolean | undefined;

property rows

rows?: number | undefined;

property value

value?: string | readonly string[] | number | undefined;

property wrap

wrap?: string | undefined;

interface ThHTMLAttributes

interface ThHTMLAttributes<T> extends HTMLAttributes<T> {}

property abbr

abbr?: string | undefined;

property align

align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined;

property colSpan

colSpan?: number | undefined;

property headers

headers?: string | undefined;

property rowSpan

rowSpan?: number | undefined;

property scope

scope?: string | undefined;

interface TimeHTMLAttributes

interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {}

property dateTime

dateTime?: string | undefined;

interface ToggleEvent

interface ToggleEvent<T = Element> extends SyntheticEvent<T, NativeToggleEvent> {}

property newState

newState: 'closed' | 'open';

property oldState

oldState: 'closed' | 'open';

interface Touch

interface Touch {}

property clientX

clientX: number;

property clientY

clientY: number;

property identifier

identifier: number;

property pageX

pageX: number;

property pageY

pageY: number;

property screenX

screenX: number;

property screenY

screenY: number;

property target

target: EventTarget;

interface TouchEvent

interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {}

property altKey

altKey: boolean;

property changedTouches

changedTouches: TouchList;

property ctrlKey

ctrlKey: boolean;

property metaKey

metaKey: boolean;

property shiftKey

shiftKey: boolean;

property targetTouches

targetTouches: TouchList;

property touches

touches: TouchList;

method getModifierState

getModifierState: (key: ModifierKey) => boolean;

See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.

interface TouchList

interface TouchList {}

property length

length: number;

method identifiedTouch

identifiedTouch: (identifier: number) => Touch;

method item

item: (index: number) => Touch;

index signature

[index: number]: Touch;

interface TrackHTMLAttributes

interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {}

property default

default?: boolean | undefined;

property kind

kind?: string | undefined;

property label

label?: string | undefined;

property src

src?: string | undefined;

property srcLang

srcLang?: string | undefined;

interface TransitionEvent

interface TransitionEvent<T = Element>
    extends SyntheticEvent<T, NativeTransitionEvent> {}

property elapsedTime

elapsedTime: number;

property propertyName

propertyName: string;

property pseudoElement

pseudoElement: string;

interface TransitionStartFunction

interface TransitionStartFunction {}

call signature

(callback: TransitionFunction): void;

State updates caused inside the callback are allowed to be deferred.
**If some state update causes a component to suspend, that state update should be wrapped in a transition.**
Parameter callback
A function which causes state updates that can be deferred.

interface UIEvent

interface UIEvent<T = Element, E = NativeUIEvent> extends SyntheticEvent<T, E> {}

property detail

detail: number;

property view

view: AbstractView;

interface VideoHTMLAttributes

interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {}

property disablePictureInPicture

disablePictureInPicture?: boolean | undefined;

property disableRemotePlayback

disableRemotePlayback?: boolean | undefined;

property height

height?: number | string | undefined;

property playsInline

playsInline?: boolean | undefined;

property poster

poster?: string | undefined;

property width

width?: number | string | undefined;

interface ViewTransitionInstance

interface ViewTransitionInstance {}

property name

name: string;

The that was used in the corresponding ViewTransition component or "auto" if the name prop was omitted.

interface ViewTransitionProps

interface ViewTransitionProps {}

property children

children?: ReactNode | undefined;

property className

className?: string | undefined;

Assigns the class to the underlying DOM node.

property enter

enter?: 'none' | (string & {}) | undefined;

Combined with className if this <ViewTransition> or its parent Component is mounted and there's no other with the same name being deleted. "none" is a special value that deactivates the view transition name under that condition.

property exit

exit?: 'none' | (string & {}) | undefined;

Combined with className if this <ViewTransition> or its parent Component is unmounted and there's no other with the same name being deleted. "none" is a special value that deactivates the view transition name under that condition.

property layout

layout?: 'none' | (string & {}) | undefined;

Combined with className there are no updates to the content inside this boundary itself but the boundary has resized or moved due to other changes to siblings. "none" is a special value that deactivates the view transition name under that condition.

property name

name?: 'auto' | (string & {}) | undefined;

"auto" will automatically assign a view-transition-name to the inner DOM node. That way you can add a View Transition to a Component without controlling its DOM nodes styling otherwise.
A difference between this and the browser's built-in view-transition-name: auto is that switching the DOM nodes within the <ViewTransition> component preserves the same name so this example cross-fades between the DOM nodes instead of causing an exit and enter. "auto"

property onEnter

onEnter?: (instance: ViewTransitionInstance) => void;

The <ViewTransition> or its parent Component is mounted and there's no other <ViewTransition> with the same name being deleted.

property onExit

onExit?: (instance: ViewTransitionInstance) => void;

The <ViewTransition> or its parent Component is unmounted and there's no other <ViewTransition> with the same name being deleted.

property onLayout

onLayout?: (instance: ViewTransitionInstance) => void;

There are no updates to the content inside this <ViewTransition> boundary itself but the boundary has resized or moved due to other changes to siblings.

property onShare

onShare?: (instance: ViewTransitionInstance) => void;

This <ViewTransition> is being mounted and another <ViewTransition> instance with the same name is being unmounted elsewhere.

property onUpdate

onUpdate?: (instance: ViewTransitionInstance) => void;

The content of <ViewTransition> has changed either due to DOM mutations or because an inner child <ViewTransition> has resized.

property ref

ref?: Ref<ViewTransitionInstance> | undefined;

share?: 'none' | (string & {}) | undefined;

Combined with className if this <ViewTransition> is being mounted and another instance with the same name is being unmounted elsewhere. "none" is a special value that deactivates the view transition name under that condition.

property update

update?: 'none' | (string & {}) | undefined;

Combined with className if the content of this <ViewTransition> has changed either due to DOM mutations or because an inner child has resized. "none" is a special value that deactivates the view transition name under that condition.

interface WebViewHTMLAttributes

interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {}

property allowFullScreen

allowFullScreen?: boolean | undefined;

property allowpopups

allowpopups?: boolean | undefined;

property autosize

autosize?: boolean | undefined;

property blinkfeatures

blinkfeatures?: string | undefined;

property disableblinkfeatures

disableblinkfeatures?: string | undefined;

property disableguestresize

disableguestresize?: boolean | undefined;

property disablewebsecurity

disablewebsecurity?: boolean | undefined;

property guestinstance

guestinstance?: string | undefined;

property httpreferrer

httpreferrer?: string | undefined;

property nodeintegration

nodeintegration?: boolean | undefined;

property partition

partition?: string | undefined;

property plugins

plugins?: boolean | undefined;

property preload

preload?: string | undefined;

property src

src?: string | undefined;

property useragent

useragent?: string | undefined;

property webpreferences

webpreferences?: string | undefined;

interface WheelEvent

interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> {}

property deltaMode

deltaMode: number;

property deltaX

deltaX: number;

property deltaY

deltaY: number;

property deltaZ

deltaZ: number;

Type Aliases

type ActionDispatch

type ActionDispatch<ActionArg extends AnyActionArg> = (...args: ActionArg) => void;

type AnimationEventHandler

type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;

type AnyActionArg

type AnyActionArg = [] | [any];

type AriaRole

type AriaRole =
    | 'alert'
    | 'alertdialog'
    | 'application'
    | 'article'
    | 'banner'
    | 'button'
    | 'cell'
    | 'checkbox'
    | 'columnheader'
    | 'combobox'
    | 'complementary'
    | 'contentinfo'
    | 'definition'
    | 'dialog'
    | 'directory'
    | 'document'
    | 'feed'
    | 'figure'
    | 'form'
    | 'grid'
    | 'gridcell'
    | 'group'
    | 'heading'
    | 'img'
    | 'link'
    | 'list'
    | 'listbox'
    | 'listitem'
    | 'log'
    | 'main'
    | 'marquee'
    | 'math'
    | 'menu'
    | 'menubar'
    | 'menuitem'
    | 'menuitemcheckbox'
    | 'menuitemradio'
    | 'navigation'
    | 'none'
    | 'note'
    | 'option'
    | 'presentation'
    | 'progressbar'
    | 'radio'
    | 'radiogroup'
    | 'region'
    | 'row'
    | 'rowgroup'
    | 'rowheader'
    | 'scrollbar'
    | 'search'
    | 'searchbox'
    | 'separator'
    | 'slider'
    | 'spinbutton'
    | 'status'
    | 'switch'
    | 'tab'
    | 'table'
    | 'tablist'
    | 'tabpanel'
    | 'term'
    | 'textbox'
    | 'timer'
    | 'toolbar'
    | 'tooltip'
    | 'tree'
    | 'treegrid'
    | 'treeitem'
    | (string & {});

type AutoFill

type AutoFill =
    | AutoFillBase
    | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;

type AutoFillAddressKind

type AutoFillAddressKind = 'billing' | 'shipping';

type AutoFillBase

type AutoFillBase = '' | 'off' | 'on';

type AutoFillContactField

type AutoFillContactField =
    | 'email'
    | 'tel'
    | 'tel-area-code'
    | 'tel-country-code'
    | 'tel-extension'
    | 'tel-local'
    | 'tel-local-prefix'
    | 'tel-local-suffix'
    | 'tel-national';

type AutoFillContactKind

type AutoFillContactKind = 'home' | 'mobile' | 'work';

type AutoFillCredentialField

type AutoFillCredentialField = 'webauthn';

type AutoFillField

type AutoFillField =
    | AutoFillNormalField
    | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;

type AutoFillNormalField

type AutoFillNormalField =
    | 'additional-name'
    | 'address-level1'
    | 'address-level2'
    | 'address-level3'
    | 'address-level4'
    | 'address-line1'
    | 'address-line2'
    | 'address-line3'
    | 'bday-day'
    | 'bday-month'
    | 'bday-year'
    | 'cc-csc'
    | 'cc-exp'
    | 'cc-exp-month'
    | 'cc-exp-year'
    | 'cc-family-name'
    | 'cc-given-name'
    | 'cc-name'
    | 'cc-number'
    | 'cc-type'
    | 'country'
    | 'country-name'
    | 'current-password'
    | 'family-name'
    | 'given-name'
    | 'honorific-prefix'
    | 'honorific-suffix'
    | 'name'
    | 'new-password'
    | 'one-time-code'
    | 'organization'
    | 'postal-code'
    | 'street-address'
    | 'transaction-amount'
    | 'transaction-currency'
    | 'username';

type AutoFillSection

type AutoFillSection = `section-${string}`;

type CElement

type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;

Deprecated
Use ReactElement<P, React.ComponentClass<P>>

type ChangeEventHandler

type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;

type ClassicElement

type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;

Deprecated
Use ComponentElement instead.

type ClassType

type ClassType<
    P,
    T extends Component<P, ComponentState>,
    C extends ComponentClass<P>
> = C & (new (props: P) => T);

Used in createElement and createFactory to represent a class.
An intersection type is used to infer multiple type parameters from a single argument, which is useful for many top-level API defs. See for more info.

type ClipboardEventHandler

type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;

type ComponentProps

type ComponentProps<
    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = T extends JSXElementConstructor<infer Props>
    ? Props
    : T extends keyof JSX.IntrinsicElements
    ? JSX.IntrinsicElements[T]
    : {};

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 ComponentPropsWithRef or ComponentPropsWithoutRef instead of this type, as they let you be explicit about whether or not to include the ref prop.
Example 1
// Retrieves the props an 'input' element accepts type InputProps = React.ComponentProps<'input'>;
Example 2
const MyComponent = (props: { foo: number, bar: string }) => <div />; // Retrieves the props 'MyComponent' accepts type MyComponentProps = React.ComponentProps<typeof MyComponent>;
See Also

type ComponentPropsWithoutRef

type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef<
    ComponentProps<T>
>;

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.

Example 1

// Retrieves the props an 'input' element accepts
type InputProps = React.ComponentPropsWithoutRef<'input'>;

Example 2

const MyComponent = (props: { foo: number, bar: string }) => <div />;

// Retrieves the props 'MyComponent' accepts
type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef<typeof MyComponent>;

type ComponentPropsWithRef

type ComponentPropsWithRef<T extends ElementType> = T extends JSXElementConstructor<
    infer Props
>
    ? // If it's a class i.e. newable we're dealing with a class component
      T extends abstract new (args: any) => any
        ? PropsWithoutRef<Props> & RefAttributes<InstanceType<T>>
        : Props
    : ComponentProps<T>;

Used to retrieve the props a component accepts with its ref. Can either be passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React component.

Example 1

// Retrieves the props an 'input' element accepts
type InputProps = React.ComponentPropsWithRef<'input'>;

Example 2

const MyComponent = (props: { foo: number, bar: string }) => <div />;

// Retrieves the props 'MyComponent' accepts
type MyComponentPropsWithRef = React.ComponentPropsWithRef<typeof MyComponent>;

type ComponentRef

type ComponentRef<T extends ElementType> =
    ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method : never;

Retrieves the type of the 'ref' prop for a given component type or tag name.
C The component type.
Example 1
type MyComponentRef = React.ComponentRef<typeof MyComponent>;
Example 2
type DivRef = React.ComponentRef<'div'>;

type ComponentState

type ComponentState = any;

type ComponentType

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

Represents any user-defined component, either as a function or a class.
Similar to JSXElementConstructor, but with extra properties like .
P The props the component accepts.
See Also
- ComponentClass
- FunctionComponent

type CompositionEventHandler

type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;

type Consumer

type Consumer<T> = ExoticComponent<ConsumerProps<T>>;

The old way to read context, before useContext existed.

Example 1

import { UserContext } from './user-context';

function Avatar() {
  return (
    <UserContext.Consumer>
      {user => <img src={user.profileImage} alt={user.name} />}
    </UserContext.Consumer>
  );
}

type ContextType

type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;

Used to retrieve the type of a context object from a Context.

C The context object.

Example 1

import { createContext } from 'react';

const MyContext = createContext({ foo: 'bar' });

type ContextType = ContextType<typeof MyContext>;
// ContextType = { foo: string }

type CustomComponentPropsWithRef

type CustomComponentPropsWithRef<T extends ComponentType> =
    T extends JSXElementConstructor<infer Props>
        ? // If it's a class i.e. newable we're dealing with a class component
          T extends abstract new (args: any) => any
            ? PropsWithoutRef<Props> & RefAttributes<InstanceType<T>>
            : Props
        : never;

Used to retrieve the props a custom component accepts with its ref.
Unlike ComponentPropsWithRef, this only works with custom components, i.e. components you define yourself. This is to improve type-checking performance.
Example 1
const MyComponent = (props: { foo: number, bar: string }) => <div />; // Retrieves the props 'MyComponent' accepts type MyComponentPropsWithRef = React.CustomComponentPropsWithRef<typeof MyComponent>;

type DependencyList

type DependencyList = readonly unknown[];

type DetailedHTMLProps

type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

type Dispatch

type Dispatch<A> = (value: A) => void;

A function that can be used to update the state of a useState or useReducer hook.

type DispatchWithoutAction

type DispatchWithoutAction = () => void;

A Dispatch function can sometimes be called without any arguments.

type DragEventHandler

type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;

type EffectCallback

type EffectCallback = () => void | Destructor;

type ElementRef

type ElementRef<
    C extends
        | ForwardRefExoticComponent<any>
        | { new (props: any): Component<any> }
        | ((props: any) => ReactNode)
        | keyof JSX.IntrinsicElements
> = ComponentRef<C>;

Example 1
type MyComponentRef = React.ElementRef<typeof MyComponent>;
Example 2
type DivRef = React.ElementRef<'div'>;
Deprecated
Use ComponentRef<T> instead
Retrieves the type of the 'ref' prop for a given component type or tag name.
C The component type.

type ElementType

type ElementType<
    P = any,
    Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements
> =
    | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]
    | ComponentType<P>;

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 ComponentType.
P The props to match against. If not passed, defaults to any. Tag An optional tag to match against. If not passed, attempts to match against all possible tags.
Example 1
// All components and tags (img, embed etc.) // which accept `src` type SrcComponents = ElementType<{ src: any }>;
Example 2
// All components type AllComponents = ElementType;
Example 3
// 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 EventHandler

type EventHandler<E extends SyntheticEvent<any>> = {
    bivarianceHack(event: E): void;
}['bivarianceHack'];

type FC

type FC<P = {}> = FunctionComponent<P>;

Represents the type of a function component. Can optionally receive a type argument that represents the props the component receives.

P The props the component accepts.

Example 1

// With props:
type Props = { name: string }

const MyComponent: FC<Props> = (props) => {
 return <div>{props.name}</div>
}

Example 2

// Without props:
const MyComponentWithoutProps: FC = () => {
  return <div>MyComponentWithoutProps</div>
}

type FocusEventHandler

type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;

type FormEventHandler

type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;

type ForwardedRef

type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;

The type of the ref received by a ForwardRefRenderFunction.
See Also
- ForwardRefRenderFunction

type GetDerivedStateFromError

type GetDerivedStateFromError<P, S> =
    /**
     * This lifecycle is invoked after an error has been thrown by a descendant component.
     * It receives the error that was thrown as a parameter and should return a value to update state.
     *
     * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
     */
    (error: any) => Partial<S> | null;

type GetDerivedStateFromProps

type GetDerivedStateFromProps<P, S> =
    /**
     * Returns an update to a component's state based on its new props and old state.
     *
     * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
     */
    (nextProps: Readonly<P>, prevState: S) => Partial<S> | null;

type HTMLAttributeAnchorTarget

type HTMLAttributeAnchorTarget =
    | '_self'
    | '_blank'
    | '_parent'
    | '_top'
    | (string & {});

type HTMLAttributeReferrerPolicy

type HTMLAttributeReferrerPolicy =
    | ''
    | 'no-referrer'
    | 'no-referrer-when-downgrade'
    | 'origin'
    | 'origin-when-cross-origin'
    | 'same-origin'
    | 'strict-origin'
    | 'strict-origin-when-cross-origin'
    | 'unsafe-url';

type HTMLElementType

type HTMLElementType =
    | 'a'
    | 'abbr'
    | 'address'
    | 'area'
    | 'article'
    | 'aside'
    | 'audio'
    | 'b'
    | 'base'
    | 'bdi'
    | 'bdo'
    | 'big'
    | 'blockquote'
    | 'body'
    | 'br'
    | 'button'
    | 'canvas'
    | 'caption'
    | 'center'
    | 'cite'
    | 'code'
    | 'col'
    | 'colgroup'
    | 'data'
    | 'datalist'
    | 'dd'
    | 'del'
    | 'details'
    | 'dfn'
    | 'dialog'
    | 'div'
    | 'dl'
    | 'dt'
    | 'em'
    | 'embed'
    | 'fieldset'
    | 'figcaption'
    | 'figure'
    | 'footer'
    | 'form'
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'head'
    | 'header'
    | 'hgroup'
    | 'hr'
    | 'html'
    | 'i'
    | 'iframe'
    | 'img'
    | 'input'
    | 'ins'
    | 'kbd'
    | 'keygen'
    | 'label'
    | 'legend'
    | 'li'
    | 'link'
    | 'main'
    | 'map'
    | 'mark'
    | 'menu'
    | 'menuitem'
    | 'meta'
    | 'meter'
    | 'nav'
    | 'noscript'
    | 'object'
    | 'ol'
    | 'optgroup'
    | 'option'
    | 'output'
    | 'p'
    | 'param'
    | 'picture'
    | 'pre'
    | 'progress'
    | 'q'
    | 'rp'
    | 'rt'
    | 'ruby'
    | 's'
    | 'samp'
    | 'search'
    | 'slot'
    | 'script'
    | 'section'
    | 'select'
    | 'small'
    | 'source'
    | 'span'
    | 'strong'
    | 'style'
    | 'sub'
    | 'summary'
    | 'sup'
    | 'table'
    | 'template'
    | 'tbody'
    | 'td'
    | 'textarea'
    | 'tfoot'
    | 'th'
    | 'thead'
    | 'time'
    | 'title'
    | 'tr'
    | 'track'
    | 'u'
    | 'ul'
    | 'var'
    | 'video'
    | 'wbr'
    | 'webview';

type HTMLInputAutoCompleteAttribute

type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});

type HTMLInputTypeAttribute

type HTMLInputTypeAttribute =
    | 'button'
    | 'checkbox'
    | 'color'
    | 'date'
    | 'datetime-local'
    | 'email'
    | 'file'
    | 'hidden'
    | 'image'
    | 'month'
    | 'number'
    | 'password'
    | 'radio'
    | 'range'
    | 'reset'
    | 'search'
    | 'submit'
    | 'tel'
    | 'text'
    | 'time'
    | 'url'
    | 'week'
    | (string & {});

type JSXElementConstructor

type JSXElementConstructor<P> =
    | ((props: P) => ReactNode | Promise<ReactNode>)
    // constructor signature must match React.Component
    | (new (props: P) => Component<any, any>);

Represents any user-defined component, either as a function or a class.
Similar to ComponentType, but without extra properties like .
P The props the component accepts.

type Key

type Key = string | number | bigint;

A value which uniquely identifies a node among items in an array.
See Also

type KeyboardEventHandler

type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;

type LegacyRef

type LegacyRef<T> = Ref<T>;

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<T>['ref'] instead.

type MemoExoticComponent

type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent<
    CustomComponentPropsWithRef<T>
> & {
    readonly type: T;
};

type ModifierKey

type ModifierKey =
    | 'Alt'
    | 'AltGraph'
    | 'CapsLock'
    | 'Control'
    | 'Fn'
    | 'FnLock'
    | 'Hyper'
    | 'Meta'
    | 'NumLock'
    | 'ScrollLock'
    | 'Shift'
    | 'Super'
    | 'Symbol'
    | 'SymbolLock';

type MouseEventHandler

type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

type OptionalPostfixToken

type OptionalPostfixToken<T extends string> = ` ${T}` | '';

type OptionalPrefixToken

type OptionalPrefixToken<T extends string> = `${T} ` | '';

type PointerEventHandler

type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;

type ProfilerOnRenderCallback

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 callback passed to ProfilerProps.onRender.
See Also

type PropsWithChildren

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

type PropsWithoutRef

type PropsWithoutRef<Props> =
    // 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
    Props extends any
        ? 'ref' extends keyof Props
            ? Omit<Props, 'ref'>
            : Props
        : Props;

Omits the 'ref' attribute from the given props object.
Props The props object type.

type PropsWithRef

type PropsWithRef<Props> = Props;

Ensures that the props do not include string ref, which cannot be forwarded
Deprecated
Use Props directly. PropsWithRef<Props> is just an alias for Props

type Provider

type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;

Wraps your components to specify the value of this context for all components inside.

Example 1

import { createContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

type ReactEventHandler

type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;

type ReactInstance

type ReactInstance = Component<any> | Element;

type ReactNode

type ReactNode =
    | ReactElement
    | string
    | number
    | bigint
    | Iterable<ReactNode>
    | ReactPortal
    | boolean
    | null
    | undefined
    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES]
    | Promise<AwaitedReactNode>;

Represents all of the things React can render.

Where ReactElement only represents JSX, ReactNode represents everything that can be rendered.

Example 1

// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>

Example 2

// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />

type Reducer

type Reducer<S, A> = (prevState: S, action: A) => S;

type ReducerState

type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any>
    ? S
    : never;

type ReducerWithoutAction

type ReducerWithoutAction<S> = (prevState: S) => S;

type Ref

type Ref<T> = RefCallback<T> | RefObject<T | null> | null;

A union type of all possible shapes for React refs.
See Also
- RefCallback
- RefObject

type RefCallback

type RefCallback<T> = {
    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 callback fired whenever the ref's value changes.
T The type of the ref's value.
Example 1
<div ref={(node) => console.log(node)} />
See Also

type Reference

type Reference = object;

type SetStateAction

type SetStateAction<S> = S | ((prevState: S) => S);

The instruction passed to a Dispatch function in useState to tell React what the next value of the useState should be.

Often found wrapped in Dispatch.

S The type of the state.

Example 1

// This return type correctly represents the type of
// `setCount` in the example below.
const useCustomState = (): Dispatch<SetStateAction<number>> => {
  const [count, setCount] = useState(0);

  return setCount;
}

type StartGesture

type StartGesture = (gestureProvider: GestureProvider) => () => void;

type SuspenseListProps

type SuspenseListProps =
    | DirectionalSuspenseListProps
    | NonDirectionalSuspenseListProps;

type SuspenseListRevealOrder

type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';

type SuspenseListTailMode

type SuspenseListTailMode = 'collapsed' | 'hidden';

type SVGElementType

type SVGElementType =
    | 'animate'
    | 'circle'
    | 'clipPath'
    | 'defs'
    | 'desc'
    | 'ellipse'
    | 'feBlend'
    | 'feColorMatrix'
    | 'feComponentTransfer'
    | 'feComposite'
    | 'feConvolveMatrix'
    | 'feDiffuseLighting'
    | 'feDisplacementMap'
    | 'feDistantLight'
    | 'feDropShadow'
    | 'feFlood'
    | 'feFuncA'
    | 'feFuncB'
    | 'feFuncG'
    | 'feFuncR'
    | 'feGaussianBlur'
    | 'feImage'
    | 'feMerge'
    | 'feMergeNode'
    | 'feMorphology'
    | 'feOffset'
    | 'fePointLight'
    | 'feSpecularLighting'
    | 'feSpotLight'
    | 'feTile'
    | 'feTurbulence'
    | 'filter'
    | 'foreignObject'
    | 'g'
    | 'image'
    | 'line'
    | 'linearGradient'
    | 'marker'
    | 'mask'
    | 'metadata'
    | 'path'
    | 'pattern'
    | 'polygon'
    | 'polyline'
    | 'radialGradient'
    | 'rect'
    | 'stop'
    | 'svg'
    | 'switch'
    | 'symbol'
    | 'text'
    | 'textPath'
    | 'tspan'
    | 'use'
    | 'view';

type TaintableUniqueValue

type TaintableUniqueValue = string | bigint | ArrayBufferView;

type ToggleEventHandler

type ToggleEventHandler<T = Element> = EventHandler<ToggleEvent<T>>;

type TouchEventHandler

type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;

type TransitionEventHandler

type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;

type TransitionFunction

type TransitionFunction = () => VoidOrUndefinedOnly | Promise<VoidOrUndefinedOnly>;

type UIEventHandler

type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;

type Usable

type Usable<T> = PromiseLike<T> | Context<T>;

type WheelEventHandler

type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;

Namespaces

namespace JSX

namespace JSX {}

interface Element

interface Element extends React.ReactElement<any, any> {}

interface ElementAttributesProperty

interface ElementAttributesProperty {}

property props

props: {};

interface ElementChildrenAttribute

interface ElementChildrenAttribute {}

property children

children: {};

interface ElementClass

interface ElementClass extends React.Component<any> {}

method render

render: () => React.ReactNode;

interface IntrinsicAttributes

interface IntrinsicAttributes extends React.Attributes {}

interface IntrinsicClassAttributes

interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {}

interface IntrinsicElements

interface IntrinsicElements {}

property "var"

var: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property a

a: React.DetailedHTMLProps<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
>;

property abbr

abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property address

address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property animate

animate: React.SVGProps<SVGElement>;

property animateMotion

animateMotion: React.SVGProps<SVGElement>;

property animateTransform

animateTransform: React.SVGProps<SVGElement>;

property area

area: React.DetailedHTMLProps<
    React.AreaHTMLAttributes<HTMLAreaElement>,
    HTMLAreaElement
>;

property article

article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property aside

aside: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property audio

audio: React.DetailedHTMLProps<
    React.AudioHTMLAttributes<HTMLAudioElement>,
    HTMLAudioElement
>;

property b

b: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property base

base: React.DetailedHTMLProps<
    React.BaseHTMLAttributes<HTMLBaseElement>,
    HTMLBaseElement
>;

property bdi

bdi: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property bdo

bdo: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property big

big: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property blockquote

blockquote: React.DetailedHTMLProps<
    React.BlockquoteHTMLAttributes<HTMLQuoteElement>,
    HTMLQuoteElement
>;

property body

body: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLBodyElement>,
    HTMLBodyElement
>;

property br

br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>;

property button

button: React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
>;

property canvas

canvas: React.DetailedHTMLProps<
    React.CanvasHTMLAttributes<HTMLCanvasElement>,
    HTMLCanvasElement
>;

property caption

caption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property center

center: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property circle

circle: React.SVGProps<SVGCircleElement>;

property cite

cite: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property clipPath

clipPath: React.SVGProps<SVGClipPathElement>;

property code

code: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property col

col: React.DetailedHTMLProps<
    React.ColHTMLAttributes<HTMLTableColElement>,
    HTMLTableColElement
>;

property colgroup

colgroup: React.DetailedHTMLProps<
    React.ColgroupHTMLAttributes<HTMLTableColElement>,
    HTMLTableColElement
>;

property data

data: React.DetailedHTMLProps<
    React.DataHTMLAttributes<HTMLDataElement>,
    HTMLDataElement
>;

property datalist

datalist: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDataListElement>,
    HTMLDataListElement
>;

property dd

dd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property defs

defs: React.SVGProps<SVGDefsElement>;

property del

del: React.DetailedHTMLProps<
    React.DelHTMLAttributes<HTMLModElement>,
    HTMLModElement
>;

property desc

desc: React.SVGProps<SVGDescElement>;

property details

details: React.DetailedHTMLProps<
    React.DetailsHTMLAttributes<HTMLDetailsElement>,
    HTMLDetailsElement
>;

property dfn

dfn: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property dialog

dialog: React.DetailedHTMLProps<
    React.DialogHTMLAttributes<HTMLDialogElement>,
    HTMLDialogElement
>;

property div

div: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
>;

property dl

dl: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDListElement>,
    HTMLDListElement
>;

property dt

dt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property ellipse

ellipse: React.SVGProps<SVGEllipseElement>;

property em

em: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property embed

embed: React.DetailedHTMLProps<
    React.EmbedHTMLAttributes<HTMLEmbedElement>,
    HTMLEmbedElement
>;

property feBlend

feBlend: React.SVGProps<SVGFEBlendElement>;

property feColorMatrix

feColorMatrix: React.SVGProps<SVGFEColorMatrixElement>;

property feComponentTransfer

feComponentTransfer: React.SVGProps<SVGFEComponentTransferElement>;

property feComposite

feComposite: React.SVGProps<SVGFECompositeElement>;

property feConvolveMatrix

feConvolveMatrix: React.SVGProps<SVGFEConvolveMatrixElement>;

property feDiffuseLighting

feDiffuseLighting: React.SVGProps<SVGFEDiffuseLightingElement>;

property feDisplacementMap

feDisplacementMap: React.SVGProps<SVGFEDisplacementMapElement>;

property feDistantLight

feDistantLight: React.SVGProps<SVGFEDistantLightElement>;

property feDropShadow

feDropShadow: React.SVGProps<SVGFEDropShadowElement>;

property feFlood

feFlood: React.SVGProps<SVGFEFloodElement>;

property feFuncA

feFuncA: React.SVGProps<SVGFEFuncAElement>;

property feFuncB

feFuncB: React.SVGProps<SVGFEFuncBElement>;

property feFuncG

feFuncG: React.SVGProps<SVGFEFuncGElement>;

property feFuncR

feFuncR: React.SVGProps<SVGFEFuncRElement>;

property feGaussianBlur

feGaussianBlur: React.SVGProps<SVGFEGaussianBlurElement>;

property feImage

feImage: React.SVGProps<SVGFEImageElement>;

property feMerge

feMerge: React.SVGProps<SVGFEMergeElement>;

property feMergeNode

feMergeNode: React.SVGProps<SVGFEMergeNodeElement>;

property feMorphology

feMorphology: React.SVGProps<SVGFEMorphologyElement>;

property feOffset

feOffset: React.SVGProps<SVGFEOffsetElement>;

property fePointLight

fePointLight: React.SVGProps<SVGFEPointLightElement>;

property feSpecularLighting

feSpecularLighting: React.SVGProps<SVGFESpecularLightingElement>;

property feSpotLight

feSpotLight: React.SVGProps<SVGFESpotLightElement>;

property feTile

feTile: React.SVGProps<SVGFETileElement>;

property feTurbulence

feTurbulence: React.SVGProps<SVGFETurbulenceElement>;

property fieldset

fieldset: React.DetailedHTMLProps<
    React.FieldsetHTMLAttributes<HTMLFieldSetElement>,
    HTMLFieldSetElement
>;

property figcaption

figcaption: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
>;

property figure

figure: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property filter

filter: React.SVGProps<SVGFilterElement>;

footer: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property foreignObject

foreignObject: React.SVGProps<SVGForeignObjectElement>;

property form

form: React.DetailedHTMLProps<
    React.FormHTMLAttributes<HTMLFormElement>,
    HTMLFormElement
>;

property g

g: React.SVGProps<SVGGElement>;

property h1

h1: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property h2

h2: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property h3

h3: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property h4

h4: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property h5

h5: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property h6

h6: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
>;

property head

head: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadElement>,
    HTMLHeadElement
>;

header: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property hgroup

hgroup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property hr

hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;

property html

html: React.DetailedHTMLProps<
    React.HtmlHTMLAttributes<HTMLHtmlElement>,
    HTMLHtmlElement
>;

property i

i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property iframe

iframe: React.DetailedHTMLProps<
    React.IframeHTMLAttributes<HTMLIFrameElement>,
    HTMLIFrameElement
>;

property image

image: React.SVGProps<SVGImageElement>;

property img

img: React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
>;

property input

input: React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
>;

property ins

ins: React.DetailedHTMLProps<
    React.InsHTMLAttributes<HTMLModElement>,
    HTMLModElement
>;

property kbd

kbd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property keygen

keygen: React.DetailedHTMLProps<
    React.KeygenHTMLAttributes<HTMLElement>,
    HTMLElement
>;

property label

label: React.DetailedHTMLProps<
    React.LabelHTMLAttributes<HTMLLabelElement>,
    HTMLLabelElement
>;

property legend

legend: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLLegendElement>,
    HTMLLegendElement
>;

property li

li: React.DetailedHTMLProps<
    React.LiHTMLAttributes<HTMLLIElement>,
    HTMLLIElement
>;

property line

line: React.SVGLineElementAttributes<SVGLineElement>;

property linearGradient

linearGradient: React.SVGProps<SVGLinearGradientElement>;

property link

link: React.DetailedHTMLProps<
    React.LinkHTMLAttributes<HTMLLinkElement>,
    HTMLLinkElement
>;

property main

main: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property map

map: React.DetailedHTMLProps<
    React.MapHTMLAttributes<HTMLMapElement>,
    HTMLMapElement
>;

property mark

mark: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property marker

marker: React.SVGProps<SVGMarkerElement>;

property mask

mask: React.SVGProps<SVGMaskElement>;

menu: React.DetailedHTMLProps<
    React.MenuHTMLAttributes<HTMLElement>,
    HTMLElement
>;

property menuitem

menuitem: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
>;

property meta

meta: React.DetailedHTMLProps<
    React.MetaHTMLAttributes<HTMLMetaElement>,
    HTMLMetaElement
>;

property metadata

metadata: React.SVGProps<SVGMetadataElement>;

property meter

meter: React.DetailedHTMLProps<
    React.MeterHTMLAttributes<HTMLMeterElement>,
    HTMLMeterElement
>;

property mpath

mpath: React.SVGProps<SVGElement>;

property nav

nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property noindex

noindex: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property noscript

noscript: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
>;

property object

object: React.DetailedHTMLProps<
    React.ObjectHTMLAttributes<HTMLObjectElement>,
    HTMLObjectElement
>;

property ol

ol: React.DetailedHTMLProps<
    React.OlHTMLAttributes<HTMLOListElement>,
    HTMLOListElement
>;

property optgroup

optgroup: React.DetailedHTMLProps<
    React.OptgroupHTMLAttributes<HTMLOptGroupElement>,
    HTMLOptGroupElement
>;

property option

option: React.DetailedHTMLProps<
    React.OptionHTMLAttributes<HTMLOptionElement>,
    HTMLOptionElement
>;

property output

output: React.DetailedHTMLProps<
    React.OutputHTMLAttributes<HTMLOutputElement>,
    HTMLOutputElement
>;

property p

p: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLParagraphElement>,
    HTMLParagraphElement
>;

property param

param: React.DetailedHTMLProps<
    React.ParamHTMLAttributes<HTMLParamElement>,
    HTMLParamElement
>;

property path

path: React.SVGProps<SVGPathElement>;

property pattern

pattern: React.SVGProps<SVGPatternElement>;

property picture

picture: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property polygon

polygon: React.SVGProps<SVGPolygonElement>;

property polyline

polyline: React.SVGProps<SVGPolylineElement>;

property pre

pre: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLPreElement>,
    HTMLPreElement
>;

property progress

progress: React.DetailedHTMLProps<
    React.ProgressHTMLAttributes<HTMLProgressElement>,
    HTMLProgressElement
>;

property q

q: React.DetailedHTMLProps<
    React.QuoteHTMLAttributes<HTMLQuoteElement>,
    HTMLQuoteElement
>;

property radialGradient

radialGradient: React.SVGProps<SVGRadialGradientElement>;

property rect

rect: React.SVGProps<SVGRectElement>;

property rp

rp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property rt

rt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property ruby

ruby: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property s

s: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property samp

samp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property script

script: React.DetailedHTMLProps<
    React.ScriptHTMLAttributes<HTMLScriptElement>,
    HTMLScriptElement
>;

property search

search: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property section

section: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property select

select: React.DetailedHTMLProps<
    React.SelectHTMLAttributes<HTMLSelectElement>,
    HTMLSelectElement
>;

property set

set: React.SVGProps<SVGSetElement>;

property slot

slot: React.DetailedHTMLProps<
    React.SlotHTMLAttributes<HTMLSlotElement>,
    HTMLSlotElement
>;

property small

small: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property source

source: React.DetailedHTMLProps<
    React.SourceHTMLAttributes<HTMLSourceElement>,
    HTMLSourceElement
>;

property span

span: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLSpanElement>,
    HTMLSpanElement
>;

property stop

stop: React.SVGProps<SVGStopElement>;

property strong

strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property style

style: React.DetailedHTMLProps<
    React.StyleHTMLAttributes<HTMLStyleElement>,
    HTMLStyleElement
>;

property sub

sub: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property summary

summary: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property sup

sup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property svg

svg: React.SVGProps<SVGSVGElement>;

property switch

switch: React.SVGProps<SVGSwitchElement>;

property symbol

symbol: React.SVGProps<SVGSymbolElement>;

property table

table: React.DetailedHTMLProps<
    React.TableHTMLAttributes<HTMLTableElement>,
    HTMLTableElement
>;

property tbody

tbody: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
>;

property td

td: React.DetailedHTMLProps<
    React.TdHTMLAttributes<HTMLTableDataCellElement>,
    HTMLTableDataCellElement
>;

property template

template: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTemplateElement>,
    HTMLTemplateElement
>;

property text

text: React.SVGTextElementAttributes<SVGTextElement>;

property textarea

textarea: React.DetailedHTMLProps<
    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
    HTMLTextAreaElement
>;

property textPath

textPath: React.SVGProps<SVGTextPathElement>;

property tfoot

tfoot: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
>;

property th

th: React.DetailedHTMLProps<
    React.ThHTMLAttributes<HTMLTableHeaderCellElement>,
    HTMLTableHeaderCellElement
>;

property thead

thead: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
>;

property time

time: React.DetailedHTMLProps<
    React.TimeHTMLAttributes<HTMLTimeElement>,
    HTMLTimeElement
>;

property title

title: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTitleElement>,
    HTMLTitleElement
>;

property tr

tr: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableRowElement>,
    HTMLTableRowElement
>;

property track

track: React.DetailedHTMLProps<
    React.TrackHTMLAttributes<HTMLTrackElement>,
    HTMLTrackElement
>;

property tspan

tspan: React.SVGProps<SVGTSpanElement>;

property u

u: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property ul

ul: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLUListElement>,
    HTMLUListElement
>;

property use

use: React.SVGProps<SVGUseElement>;

property video

video: React.DetailedHTMLProps<
    React.VideoHTMLAttributes<HTMLVideoElement>,
    HTMLVideoElement
>;

property view

view: React.SVGProps<SVGViewElement>;

property wbr

wbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

property webview

webview: React.DetailedHTMLProps<
    React.WebViewHTMLAttributes<HTMLWebViewElement>,
    HTMLWebViewElement
>;

type ElementType

type ElementType = string | React.JSXElementConstructor<any>;

type LibraryManagedAttributes

type LibraryManagedAttributes<C, P> = C extends
    | React.MemoExoticComponent<infer T>
    | React.LazyExoticComponent<infer T>
    ? T extends
          | React.MemoExoticComponent<infer U>
          | React.LazyExoticComponent<infer U>
        ? ReactManagedAttributes<U, P>
        : ReactManagedAttributes<T, P>
    : ReactManagedAttributes<C, P>;

Package Files (3)

Dependencies (1)

csstype

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/react)

HTML

<a href="https://www.jsdocs.io/package/@types/react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 day ago.
Package analyzed in 18693 ms.
Missing or incorrect documentation? Open an issue for this package.

@types/react

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable Children

variable Fragment

Example 1

Example 2

See Also

variable Profiler

Example 1

See Also

variable StrictMode

Example 1

See Also

variable Suspense

Example 1

See Also

variable UNDEFINED_VOID_ONLY

variable unstable_SuspenseList

See Also

variable unstable_ViewTransition

See Also

variable version

Functions

function act

Parameter callback

See Also

function cache

function captureOwnerStack

See Also

function cloneElement

function createContext

Parameter defaultValue

Example 1

See Also

function createElement

function createRef

function experimental_taintObjectReference

function experimental_taintUniqueValue

function experimental_useEffectEvent

function forwardRef

Parameter render

Example 1

See Also

function isValidElement

function lazy

Parameter load

Example 1

See Also

function memo

Parameter Component

Parameter propsAreEqual

Example 1

See Also

function startTransition

Parameter callback

function unstable_useCacheRefresh

function unstable_useSwipeTransition

function use

function useActionState

function useCallback

See Also

function useContext

See Also

function useDebugValue

See Also

function useDeferredValue

Parameter value

Parameter initialValue

See Also

function useEffect

Parameter effect