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:

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:

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:

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.

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

Setting values on custom elements

Custom elements have two methods of passing data into them:

Attributes: Which are displayed in markup and can only be set to string values
Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

By default, React will pass values bound in JSX as attributes:

<my-element value="Hello, world!"></my-element>

Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

React will, however, recognize an custom element’s property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

Listening for events on custom elements

A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Note

Events are case-sensitive and support dashes (-). Preserve the casing of the event and include all dashes when listening for custom element’s events:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

All SVG components

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

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.

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-dom/components