aria-* props support
ARIA attributes are supported on all built-in components. All ARIA attribute names in React are exactly the same as in HTML. They specify accessibility tree information for the element.
React · API reference · all subjects
react-dom/components
130 notes in this subject, read out of this brain and free to use. This is page 1 of 3.
FocusEvent handler properties and inheritance
FocusEvent handler receives a React event object with relatedTarget property from FocusEvent. It also inherits UIEvent properties: detail and view.
form elements onReset and onSubmit events
The onReset and onSubmit events fire only on <form> elements. onReset fires when a form gets reset. onSubmit fires when a form gets submitted. Both have capture phase variants: onResetCapture and onSubmitCapture.
onKeyPress is deprecated
The onKeyPress event is deprecated. Use onKeyDown or onBeforeInput instead.
PointerEvent handler properties and inheritance
PointerEvent handler receives a React event object with properties: height, isPrimary, pointerId, pointerType, pressure, tangentialPressure, tiltX, tiltY, twist, width. It inherits MouseEvent properties: altKey, button, buttons, ctrlKey, clientX, clientY, getModifierState(key), metaKey, movementX, movementY, pageX, pageY, relatedTarget, screenX, screenY, shiftKey. It also inherits UIEvent properties: detail and view.
InputEvent handler properties
InputEvent handler receives a React event object with a data property from the InputEvent interface. Used for onBeforeInput events.
ref prop accepts multiple types
The ref prop accepts: a ref object from useRef or createRef, a ref callback function, or a string for legacy refs. When filled, the ref will contain the DOM element for that node.
suppressContentEditableWarning prop
suppressContentEditableWarning is a boolean prop. When set to true, it suppresses the warning React shows for elements that have both children and contentEditable={true}, which normally do not work together. Use this when building text input libraries that manage contentEditable content manually.
suppressHydrationWarning prop
suppressHydrationWarning is a boolean prop used with server rendering. When set to true, React will not warn about mismatches in attributes and content of that element between server and client renders. It only works one level deep and is intended as an escape hatch for rare cases like timestamps where exact matches are impossible.
style prop CSS properties format
The style prop takes an object with CSS styles, e.g. { fontWeight: 'bold', margin: 20 }. CSS property names must be camelCase like fontWeight instead of font-weight. Values can be strings or numbers. When passing a number like width: 100, React automatically appends 'px' unless it is a unitless property.
Common component children prop
The children prop specifies content inside a component. It accepts a React node which can be an element, string, number, portal, empty node (null, undefined, booleans), or an array of other React nodes. When using JSX, children is usually specified implicitly by nesting tags.
onDragOver requires preventDefault for dropping
In an onDragOver handler, you must call e.preventDefault() to allow dropping on a valid drop target.
KeyboardEvent handler properties and inheritance
KeyboardEvent handler receives a React event object with properties: altKey, charCode, code, ctrlKey, getModifierState(key), key, keyCode, locale, metaKey, location, repeat, shiftKey, which. It also inherits UIEvent properties: detail and view.
details element onToggle event bubbles in React
The onToggle event on <details> elements bubbles in React, unlike in browsers. It fires when the user toggles the details. It has a capture phase variant: onToggleCapture.
dir prop values
The dir prop can be either 'ltr' or 'rtl' and specifies the text direction of the element.
htmlFor prop for labels
The htmlFor prop is a string used on <label> and <output> elements to associate the label with a control. It corresponds to the 'for' HTML attribute. React uses the standard DOM property name htmlFor instead of the HTML attribute name.
hidden prop accepts boolean or string
The hidden prop can be a boolean or string and specifies whether the element should be hidden.
id prop and useId hook
The id prop specifies a unique identifier for an element. Generate it with the useId hook to avoid clashes between multiple instances of the same component.
is prop for custom elements
The is prop is a string that, when specified, makes the component behave like a custom element.
onBlur event bubbles in React
In React, the onBlur event bubbles, unlike the built-in browser blur event which does not bubble.
onFocus event bubbles in React
In React, the onFocus event bubbles, unlike the built-in browser focus event which does not bubble.
onMouseEnter and onMouseLeave propagation
onMouseEnter and onMouseLeave do not have a capture phase. Instead, they propagate from the element being left to the one being entered.
onPointerEnter and onPointerLeave propagation
onPointerEnter and onPointerLeave do not have a capture phase. Instead, they propagate from the element being left to the one being entered.
className vs style prop recommendation
React recommends using className with plain CSS classes for most styling as it is more efficient. Only use the style prop for dynamic styles where values are not known ahead of time.
contentEditable prop warning
When contentEditable is set to true, React warns if you pass React children to that element because React will not be able to update the content after user edits. This is used to implement rich text input libraries like Lexical.
onBeforeInput polyfill
React does not yet use the native beforeinput event. Instead, onBeforeInput is polyfilled using other events.
dangerouslySetInnerHTML prop
The dangerouslySetInnerHTML prop takes an object of the form { __html: '<p>some html</p>' } with a raw HTML string. It overrides the innerHTML property of the DOM node. Must be used with extreme caution as it risks XSS vulnerabilities if the HTML comes from untrusted sources like user data.
dialog elements onCancel and onClose events bubble in React
The onCancel and onClose events on <dialog> elements bubble in React, unlike in browsers. onCancel fires when the user tries to dismiss the dialog. onClose fires when the dialog has been closed. Both have capture phase variants: onCancelCapture and onCloseCapture.
data-* attributes in React
Data attributes like data-fruit="banana" can be passed to elements. In React, they are not commonly used because data is usually read from props or state instead.
onLoad and onError events bubble in React for media and image elements
For <img>, <iframe>, <object>, <embed>, <link>, and SVG <image> elements, onLoad and onError events bubble in React, unlike in browsers. onLoad fires when the resource has loaded. onError fires when the resource could not be loaded. Both have capture phase variants: onLoadCapture and onErrorCapture.
Audio and video media events
Media events (onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onResize, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting) fire on <audio> and <video> elements and bubble in React, unlike in browsers. Each has a corresponding capture phase variant.
Custom attributes in React
Custom attributes can be passed as props for integration with third-party libraries. The custom attribute name must be lowercase and must not start with 'on'. The value will be converted to a string. If null or undefined is passed, the custom attribute will be removed.
Cannot pass both children and dangerouslySetInnerHTML
You cannot pass both children and dangerouslySetInnerHTML props at the same time.
React event bubbling differences from browser
Some events like onAbort and onLoad do not bubble in the browser but bubble in React.
ref callback function cleanup support
As of React 19, ref callbacks can return a cleanup function. When the ref is detached, React will call the cleanup function. For backwards compatibility, if no cleanup function is returned, React will call the callback with null when the ref is detached. This behavior will be removed in a future version.
ref callback function signature
A ref callback function receives a DOM node as its parameter. React calls it with the DOM node when the ref gets attached. Unless the same function reference is passed for the ref callback on every render, the callback will be temporarily cleaned up and re-created during every re-render.
ref callback cleanup on different function
When a different ref callback function is passed, React will call the previous callback's cleanup function if provided. If no cleanup function is defined, the previous ref callback will be called with null as the argument. The next function will be called with the DOM node.
React event object synthetic event
Event handlers receive a React event object, also known as a synthetic event. It conforms to the same standard as underlying DOM events but fixes some browser inconsistencies.
React event nativeEvent property
React event objects have a nativeEvent property that points to the original browser event. Some React events do not map directly to browser events. For example, onMouseLeave's nativeEvent points to a mouseout event. The specific mapping is not part of the public API and may change.
React event object standard properties
React event objects implement standard Event properties: bubbles (boolean), cancelable (boolean), currentTarget (DOM node), defaultPrevented (boolean), eventPhase (number), isTrusted (boolean), target (DOM node), and timeStamp (number).
React event object methods
React event objects implement standard Event methods: preventDefault() and stopPropagation(). Additionally, they provide: isDefaultPrevented() (returns boolean), isPropagationStopped() (returns boolean), persist() (not used with React DOM), and isPersistent() (not used with React DOM).
React event object currentTarget caveat
The values of currentTarget, eventPhase, target, and type reflect what React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. currentTarget may not be the same as the underlying nativeEvent.currentTarget.
AnimationEvent handler properties
AnimationEvent handler receives a React event object with extra properties: animationName, elapsedTime, and pseudoElement from the AnimationEvent interface.
ClipboardEvent handler properties
ClipboardEvent handler receives a React event object with an extra property: clipboardData from the ClipboardEvent interface.
CompositionEvent handler properties
CompositionEvent handler receives a React event object with an extra property: data from the CompositionEvent interface. This is used for input method editor (IME) events.
React uses camelCase for HTML and SVG prop names
React uses a camelCase convention for prop names on HTML and SVG elements. For example, write `tabIndex` instead of `tabindex`.
React supports all browser HTML and SVG components
React supports all of the browser built-in HTML and SVG components for rendering in JSX.
SVG namespaced attributes convert to camelCase
Namespaced SVG attributes must be written without the colon and in camelCase: `xlink:href` becomes `xlinkHref`, `xml:lang` becomes `xmlLang`, `xmlns:xlink` becomes `xmlnsXlink`, etc.
Custom element event case and dash preservation
When listening for custom element events, preserve the casing of the event and include all dashes. For example, `onsay-hi={console.log}` listens for `say-hi` events, and `onsayHi={console.log}` listens for `sayHi` events.
Custom elements dispatch CustomEvent with event prefix
Custom elements often dispatch `CustomEvent`s rather than accept callback functions. Listen for these events using an `on` prefix when binding via JSX. Events are case-sensitive and support dashes.
Custom element properties recognized if defined on class
React will recognize a custom element's property as one that it may pass arbitrary JavaScript values to if the property name shows up on the class during construction. This allows passing non-string values directly as properties.
Custom elements default to string attributes
By default, React will pass values bound in JSX to custom elements as attributes, which are displayed in markup and can only be set to string values. Non-string JavaScript values passed to custom elements will be serialized by default (e.g., `[1,2,3]` becomes `"1,2,3"` via `.toString()`).
Custom HTML elements with dashes are supported
If you render a tag with a dash like `<my-element>`, React will assume you want to render a custom HTML element. If you render a built-in browser HTML element with an `is` attribute, it will also be treated as a custom element.
React supports common components with ref and dangerouslySetInnerHTML
All built-in browser components support common props and events, including React-specific props like `ref` and `dangerouslySetInnerHTML`.
Resource and metadata components suspend while loading
React's resource and metadata components (`<link>`, `<meta>`, `<script>`, `<style>`, `<title>`) can be rendered into the document head, suspend while resources are loading, and enact other special behaviors. React can render them into the document head.
<link> preload and modulepreload props table
Props that apply when rel="preload" or rel="modulepreload": as (string, required, type of resource with possible values audio, document, embed, fetch, font, image, object, script, style, track, video, worker), imageSrcSet (string, applicable only when as="image", specifies source set of image), imageSizes (string, applicable only when as="image", specifies sizes of image).
<link> stylesheet props table
Props that apply when rel="stylesheet": precedence (string, tells React where to rank the link relative to others), media (string, restricts stylesheet to a media query), title (string, specifies the name of an alternative stylesheet). Props that disable React's special treatment: disabled (boolean), onError (function), onLoad (function). Props that apply to all rel values: href (string, URL of linked resource), crossOrigin (string, values: anonymous, use-credentials; required when as is "fetch"), referrerPolicy (string, values: no-referrer-when-downgrade default, no-referrer, origin, origin-when-cross-origin, unsafe-url), fetchPriority (string, values: auto default, high, low), hrefLang (string, language of linked resource), integrity (string, cryptographic hash for verification), type (string, MIME type).
<link> with rel="stylesheet" requires precedence prop for special behavior
If the <link> has rel="stylesheet", it must also have a precedence prop to get React's special rendering behavior. The precedence prop tells React where to rank the <link> DOM node relative to others in the document <head>. React infers that precedence values discovered first are "lower" and precedence values discovered later are "higher". If the precedence prop is omitted, there is no special behavior.
<link> rel prop required and affects behavior
The rel prop is required on <link> and specifies the relationship to the resource. React treats links with rel="stylesheet" differently from other links. Different rel values (stylesheet, preload, modulepreload, icon, apple-touch-icon) enable different props and behaviors.
<link> component renders to document head
React always places the DOM element corresponding to the <link> component within the document's <head>, regardless of where in the React tree it is rendered. The <head> is the only valid place for <link> to exist within the DOM.