TypeScript
A guide to using TypeScript with Base UI.
View as MarkdownNamespaces
Base UI uses namespaces to organize types. Every component has two core interfaces:
Props(such asTooltip.Root.Props)State(such asTooltip.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.
Prop types
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.
Positioner state
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 asCombobox.Root.ChangeEventDetails) is the object passed to change handlers likeonValueChangeandonOpenChange.ChangeEventReason(such asCombobox.Root.ChangeEventReason) is the union of possible reason strings for a change event.
Change event types
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
actionsRefprop to access imperative methods. For example,Menu.Root.Actionsgives access to the shape of theactionsRefobject prop onMenu.Root. - The
toastobject onToast.Rootis a complex object with many properties.Toast.Root.ToastObjectgives access to this interface. - Components that have a
renderprop have an extendedReact.ComponentPropstype, enhanced with arenderprop. TheuseRender.ComponentPropstype on the function gives access to this interface.