TypeScript

Namespaces

Base UI uses namespaces to organize types. Every component has two core interfaces:

• Props (such as Tooltip.Root.Props)
• State (such as Tooltip.Root.State)

Props

When creating wrapping components, you can use the Props type to accept all of the underlying Base UI props for the component.

import { Tooltip } from '@base-ui-components/react/tooltip';

function MyTooltip(props: Tooltip.Root.Props) {
  return <Tooltip.Root {...props} />;
}

State

The State type is the internal state of the component. For example, Positioner components (such as Popover.Positioner) have state that describes the position of the element in relation to their anchor.

function renderPositioner(props: Popover.Positioner.Props, state: Popover.Positioner.State) {
  return (
    <div {...props}>
      <ul>
        <li>The popover is {state.open ? 'open' : 'closed'}</li>
        <li>I am on the {state.side} side of the anchor</li>
        <li>I am aligned at the {state.align} of the side</li>
        <li>The anchor is {state.anchorHidden ? 'hidden' : 'visible'}</li>
      </ul>
      {props.children}
    </div>
  );
}

<Popover.Positioner render={renderPositioner} />

Events

Types relating to custom Base UI events are also exported on component parts’ namespaces.

• ChangeEventDetails (such as Combobox.Root.ChangeEventDetails) is the object passed to change handlers like onValueChange and onOpenChange.
• ChangeEventReason (such as Combobox.Root.ChangeEventReason) is the union of possible reason strings for a change event.

function onValueChange(value: string, eventDetails: Combobox.Root.ChangeEventDetails) {
  console.log(value, eventDetails);
}

function onOpenChange(open: boolean, eventDetails: Combobox.Root.ChangeEventDetails) {
  console.log(open, eventDetails);
}

Other accessible types

Depending on the component API, other types are also exported on component parts or utility functions. The following list is non-exhaustive, and each of these are documented where necessary.

• Popups have an actionsRef prop to access imperative methods. For example, Menu.Root.Actions gives access to the shape of the actionsRef object prop on Menu.Root.
• The toast object on Toast.Root is a complex object with many properties. Toast.Root.ToastObject gives access to this interface.
• Components that have a render prop have an extended React.ComponentProps type, enhanced with a render prop. The useRender.ComponentProps type on the function gives access to this interface.