logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • Common components
  • Form components
  • Resource and Metadata Components
  • All HTML components
  • Custom HTML elements
  • All SVG components

    react@19.2

  • Overview
  • Hooks
    • useActionState
    • useCallback
    • useContext
    • useDebugValue
    • useDeferredValue
    • useEffect
    • useEffectEvent
    • useId
    • useImperativeHandle
    • useInsertionEffect
    • useLayoutEffect
    • useMemo
    • useOptimistic
    • useReducer
    • useRef
    • useState
    • useSyncExternalStore
    • useTransition
  • المكونات
    • <Fragment> (<>)
    • <Profiler>
    • <StrictMode>
    • <Suspense>
    • <Activity>
    • <ViewTransition> - This feature is available in the latest Canary version of React
  • APIs
    • act
    • addTransitionType - This feature is available in the latest Canary version of React
    • cache
    • cacheSignal
    • captureOwnerStack
    • createContext
    • lazy
    • memo
    • startTransition
    • use
    • experimental_taintObjectReference - This feature is available in the latest Experimental version of React
    • experimental_taintUniqueValue - This feature is available in the latest Experimental version of React
  • react-dom@19.2

  • Hooks
    • useFormStatus
  • المكونات
    • Common (e.g. <div>)
    • <form>
    • <input>
    • <option>
    • <progress>
    • <select>
    • <textarea>
    • <link>
    • <meta>
    • <script>
    • <style>
    • <title>
  • APIs
    • createPortal
    • flushSync
    • preconnect
    • prefetchDNS
    • preinit
    • preinitModule
    • preload
    • preloadModule
  • Client APIs
    • createRoot
    • hydrateRoot
  • Server APIs
    • renderToPipeableStream
    • renderToReadableStream
    • renderToStaticMarkup
    • renderToString
    • resume
    • resumeToPipeableStream
  • Static APIs
    • prerender
    • prerenderToNodeStream
    • resumeAndPrerender
    • resumeAndPrerenderToNodeStream
  • React Compiler

  • Configuration
    • compilationMode
    • gating
    • logger
    • panicThreshold
    • target
  • Directives
    • "use memo"
    • "use no memo"
  • Compiling Libraries
  • React DevTools

  • React Performance tracks
  • eslint-plugin-react-hooks

  • Lints
    • exhaustive-deps
    • rules-of-hooks
    • component-hook-factories
    • config
    • error-boundaries
    • gating
    • globals
    • immutability
    • incompatible-library
    • preserve-manual-memoization
    • purity
    • refs
    • set-state-in-effect
    • set-state-in-render
    • static-components
    • unsupported-syntax
    • use-memo
  • Rules of React

  • Overview
    • Components and Hooks must be pure
    • React calls Components and Hooks
    • Rules of Hooks
  • React Server Components

  • Server Components
  • Server Functions
  • Directives
    • 'use client'
    • 'use server'
  • Legacy APIs

  • Legacy React APIs
    • Children
    • cloneElement
    • Component
    • createElement
    • createRef
    • forwardRef
    • isValidElement
    • PureComponent
API Reference

React DOM Components

React supports all of the browser built-in HTML and SVG components.


Common components

All of the built-in browser components support some props and events.

  • Common components (e.g. <div>)

This includes React-specific props like ref and dangerouslySetInnerHTML.


Form components

These built-in browser components accept user input:

  • <input>
  • <select>
  • <textarea>

They are special in React because passing the value prop to them makes them controlled.


Resource and Metadata Components

These built-in browser components let you load external resources or annotate the document with metadata:

  • <link>
  • <meta>
  • <script>
  • <style>
  • <title>

They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.


All HTML components

React supports all built-in browser HTML components. This includes:

  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <data>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <picture>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <slot>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>

Note

Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing HTML to JSX with an online converter.


Custom HTML elements

If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element. In React, rendering custom elements works differently from rendering built-in browser tags:

  • All custom element props are serialized to strings and are always set using attributes.
  • Custom elements accept class rather than className, and for rather than htmlFor.

If you render a built-in browser HTML element with an is attribute, it will also be treated as a custom element.

Note

A future version of React will include more comprehensive support for custom elements.

You can try it by upgrading React packages to the most recent experimental version:

  • react@experimental
  • react-dom@experimental

Experimental versions of React may contain bugs. Don’t use them in production.


All SVG components

React supports all built-in browser SVG components. This includes:

  • <a>
  • <animate>
  • <animateMotion>
  • <animateTransform>
  • <circle>
  • <clipPath>
  • <defs>
  • <desc>
  • <discard>
  • <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>
  • <hatch>
  • <hatchpath>
  • <image>
  • <line>
  • <linearGradient>
  • <marker>
  • <mask>
  • <metadata>
  • <mpath>
  • <path>
  • <pattern>
  • <polygon>
  • <polyline>
  • <radialGradient>
  • <rect>
  • <script>
  • <set>
  • <stop>
  • <style>
  • <svg>
  • <switch>
  • <symbol>
  • <text>
  • <textPath>
  • <title>
  • <tspan>
  • <use>
  • <view>

Note

Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing SVG to JSX with an online converter.

Namespaced attributes also have to be written without the colon:

  • xlink:actuate becomes xlinkActuate.
  • xlink:arcrole becomes xlinkArcrole.
  • xlink:href becomes xlinkHref.
  • xlink:role becomes xlinkRole.
  • xlink:show becomes xlinkShow.
  • xlink:title becomes xlinkTitle.
  • xlink:type becomes xlinkType.
  • xml:base becomes xmlBase.
  • xml:lang becomes xmlLang.
  • xml:space becomes xmlSpace.
  • xmlns:xlink becomes xmlnsXlink.
PrevioususeFormStatus
NextCommon (e.g. <div>)

Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms