Use Type

Look up individual type data by name from the nearest TypesDataProvider.

The useType hook is the consumer-side complement to useTypes. While useTypes registers types into a shared context, useType retrieves a single type by name. Together with TypesDataProvider, they form a context-based system for interactive type exploration.

Typical data flow:

TypesDataProvider (wraps the page layout)
    ↓
useTypes() — registers types and their properties during render
    ↓
useType("Root") — looks up a single type by name
useTypeProp("Root", "className") — looks up a single property by type and name
    ↓
TypeRef / TypePropRef component — renders interactive popover

• Single type lookup: Retrieve processed type metadata by name via useType
• Single property lookup: Retrieve a processed property by type and prop name via useTypeProp
• Context-driven: Works with any TypesDataProvider ancestor in the tree
• Graceful fallback: Returns undefined when no provider exists or the name is unregistered
• Client-only: Requires 'use client' (uses React context)

'use client';

import { useType } from '@mui/internal-docs-infra/useType';

function MyTypeViewer({ typeName }: { typeName: string }) {
  const typeData = useType(typeName);

  if (!typeData) {
    return <span>Type not found: {typeName}</span>;
  }

  return (
    <div>
      <h3>{typeData.meta.name}</h3>
      <a href={typeData.href}>Go to documentation</a>
    </div>
  );
}

The provider must wrap your component tree so that useTypes can register types and useType can read them:

// layout.tsx
import { TypesDataProvider } from '@mui/internal-docs-infra/useType';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <TypesDataProvider>{children}</TypesDataProvider>;
}

A common use case is building a TypeRef component that renders an interactive popover when a user clicks on a type name in a code block. The typeRefComponent option in abstractCreateTypes causes the enhanceCodeTypes plugin to emit custom elements instead of plain <a> tags, which are then resolved to your TypeRef component.

'use client';

import { Popover } from '@base-ui/react/popover';
import { useType } from '@mui/internal-docs-infra/useType';

function TypeRef({ href, name, className, children }) {
  const typeData = useType(name);

  // Fall back to a plain link when the type hasn't been registered
  if (!typeData) {
    return (
      <a href={href} className={className}>
        {children}
      </a>
    );
  }

  return (
    <Popover.Root>
      <Popover.Trigger className={className}>{children}</Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup>
            {/* Render your type documentation here using typeData.meta */}
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

Important: The popover content must not be rendered into the DOM while closed. Type documentation often contains code blocks with nested TypeRef elements — if each one eagerly renders its own popover content, it creates an infinite render loop. Use a portal (like Popover.Portal above) or conditionally render the content only when the popover is open.

See Enhance Code Types — typeRefComponent and Abstract Create Types — typeRefComponent for how to wire this up.

The useTypeProp hook looks up a single property from a registered type. This is useful for building TypePropRef components that show property details in a popover:

'use client';

import { useTypeProp } from '@mui/internal-docs-infra/useType';

function TypePropRef({ typeName, propName, href, className, children }) {
  const propData = useTypeProp(typeName, propName);

  if (!propData) {
    return (
      <a href={href} className={className}>
        {children}
      </a>
    );
  }

  return (
    <a href={propData.href} className={className}>
      {children}
    </a>
  );
}

The useTypeProp hook returns TypePropData containing the EnhancedProperty and its href anchor (e.g., #root:class-name). Properties are automatically registered by useTypes for:

• Component types: data.props
• Hook/function types: data.parameters and data.optionsProperties

A client component that collects type data from all useTypes() calls within its subtree.

1. TypesDataProvider holds a Map<string, TypeData> for types and a Map<string, TypePropData> for properties
2. Each useTypes() call registers its types via registerTypes and their properties via registerTypeProps
3. Types are registered under both the namespaced name (e.g., Accordion.Root.Props) and any aliases (e.g., the flat export name AccordionRootProps)
4. Properties are registered under composite keys like "Root:className" — the type name and property name joined by :
5. The callbacks compare incoming entries against existing data and only update state when something changed (preventing infinite loops)
6. useType(name) reads from the types map; useTypeProp(typeName, propName) reads from the properties map

Both registerTypes and registerTypeProps perform shallow comparison of their respective entries. If all incoming entries match the existing map, no state update occurs. This prevents re-render cycles when useTypes effects re-fire with the same data.

string

TypeData | undefined

string

string

TypePropData | undefined

React.ReactNode

TypesDataContextValue | undefined

type TypeData = {
  /** The processed type metadata (component, hook, function, class, or raw) */
  meta: EnhancedTypesMeta;
  /** The anchor href for navigating to this type's documentation */
  href: string;
}

type TypePropData = {
  /** The processed property metadata */
  property: EnhancedProperty;
  /** The anchor href for navigating to this property's documentation */
  href: string;
}

type TypePropRefProps = {
  /** The anchor id (when this is the definition site) */
  id?: string;
  /** The anchor href (when this is a reference to the definition) */
  href?: string;
  /** The owner type name (e.g., "Root", "Trigger") */
  name: string;
  /** The property path (e.g., "className", "open") */
  prop: string;
  /** Optional CSS class name(s) inherited from syntax highlighting */
  className?: string;
  /** The rendered text content */
  children: React.ReactNode;
}

type TypeRefProps = {
  /** The anchor href for the type documentation */
  href: string;
  /** The matched identifier name (e.g., "Trigger", "Accordion.Trigger") */
  name: string;
  /** Optional CSS class name(s) inherited from the syntax highlighting span */
  className?: string;
  /** The rendered text content */
  children: React.ReactNode;
}

• useTypes: Hook that registers types into the context
• abstractCreateTypes: Factory that creates type documentation components
• enhanceCodeTypes: Rehype plugin that links code identifiers