MUI Docs Infra

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Use Types

Access processed type information within a TypesTable component using the Props Context Layering pattern.

Overview

The useTypes hook provides a consistent interface for accessing type metadata that has been processed during component creation. This follows the Props Context Layering pattern, allowing for future enhancements through context while maintaining the current props-based API.

Key Responsibilities:

  • Provides a consistent interface for accessing processed types
  • Automatically registers types into a TypesDataProvider context when one is present
  • Enables interactive type exploration via useType
  • Returns props unchanged (processing happens during component creation)

Data Flow:

Build Time (Webpack Loader)
──────────────────────────
TypeScript Component
    ↓
Extract types (typescript-api-extractor)
    ↓
Format as HAST nodes (syntax highlighting)
    ↓
Embed in source code as JSON

Runtime (React - First Render)
──────────────────────────────
Import factory with embedded HAST
    ↓
TypesComponent renders
    ↓
typesToJsx converts HAST → React.ReactNode (memoized)
    ↓
TypesTable component renders

Key Points:

  • Build time: TypeScript types are extracted and formatted as HAST (syntax-highlighted AST)
  • First render: typesToJsx converts HAST to React.ReactNode via memoization
  • Runtime: useTypes returns the already-processed types from props and registers them into context
  • Context registration: When a TypesDataProvider is present, useTypes pushes type data into a shared Map so useType(name) can look up individual types
  • Display: Your components render the processed React nodes

Types are built using typescript-api-extractor and formatted with syntax highlighting at build time.

Context Registration

When rendered inside a TypesDataProvider, useTypes automatically registers each type (main + additional) into a shared context via useEffect. This enables:

  • useType(name): Look up a single type's processed metadata by name
  • Interactive type references: Build TypeRef components that show type popovers in code blocks

Types are registered under their namespaced name (e.g., Accordion.Item.ChangeEventDetails) and also under any aliases (e.g., the flat export name AccordionItemChangeEventDetails). Both names resolve to the same type data, making lookups work regardless of which naming convention is used.

The registration is additive and deduplicates — if the same type data is registered again, no state update occurs.

Basic Usage

Basic

This page demonstrates how to use the useTypes hook to extract and display type information from React components.

A simple component that displays a title and optional children.

PropTypeDescription
title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

import { createTypes } from './createTypes';
import { Component } from './Component';

export const TypesCheckbox = createTypes(import.meta.url, Component);

Data Attr

This demo shows how to display data attributes defined in a component using the useTypes hook.

A simple component that displays a title and optional children.

PropTypeDescription
title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

Data AttributeDescriptionDefault
data-type

The type of the component.

import { createTypes } from './createTypes';
import { Component } from './Component';

export const TypesCheckboxDataAttr = createTypes(import.meta.url, Component);

Hook

This demo illustrates how to use the useTypes hook to extract and display type information from a custom React hook.

Return Type
KeyTypeRequired
name
string
Yes
data
string
Yes
import { createTypes } from './createTypes';
import { useHook } from './useHook';

export const TypesHook = createTypes(import.meta.url, useHook);

Function

This demo shows how to use the useTypes hook to extract and display type information from a function. When a function has a single anonymous object parameter, its fields are expanded into individual properties.

Formats a greeting message.

PropertyTypeDescription
name
string

The name to greet

formal
boolean | undefined

Whether to use a formal greeting

Return Type
string
import { createTypes } from './createTypes';
import { formatGreeting } from './myFunction';

export const TypesFunction = createTypes(import.meta.url, formatGreeting);

Blocks

This demo illustrates how to use the useTypes hook to extract and display type information from a custom React hook.

ComponentRoot

A simple component that displays a title and optional children.

PropTypeDescription
title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

ComponentPart

A simple component that displays a title and optional children.

PropTypeDescription
title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

import * as React from 'react';
import { TypesComponent as ComponentTypes } from './types';

export function TypesComponent() {
  return (
    <div>
      <h3>ComponentRoot</h3>
      <ComponentTypes.Root />
      <h3>ComponentPart</h3>
      <ComponentTypes.Part />
    </div>
  );
}

Blocks Data Attr

This demo illustrates how to use the useTypes hook to extract and display type information from a custom React hook.

Component API

Root

A simple component that displays a title and optional children.

PropTypeDescription
onStateChange
| ((details: Component.Root.ChangeEventDetails) => void)
| undefined

Callback fired when the state changes. Receives the event details containing previous and new states.

partState
Component.Part.State | undefined

Optional state from the Part component. This demonstrates cross-component type references.

title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

Data AttributeDescriptionDefault
data-disabled

Present when the component is disabled.

data-title

Present when the component has a title.

Component.Root.Props
type ComponentRootProps = {
  /** The title to display */
  title: string;
  /** Whether the component is disabled */
  disabled?: boolean;
  /** Child elements */
  children?: React.ReactNode;
  /**
   * Callback fired when the state changes.
   * Receives the event details containing previous and new states.
   */
  onStateChange?: (details: Component.Root.ChangeEventDetails) => void;
  /**
   * Optional state from the Part component.
   * This demonstrates cross-component type references.
   */
  partState?: Component.Part.State;
}
Component.Root.State
type ComponentRootState = {
  /** Whether the component is disabled */
  disabled: boolean;
  /** Whether the component is active */
  active: boolean;
}
Component.Root.ChangeEventDetails
type ComponentRootChangeEventDetails = {
  /** The previous state */
  previousState: Component.Root.State;
  /** The new state */
  newState: Component.Root.State;
}

Part

A simple component that displays a title and optional children.

PropTypeDescription
input
InputType | undefined
title
string

The title to display

disabled
boolean | undefined

Whether the component is disabled

children
React.ReactNode | undefined

Child elements

Data AttributeDescriptionDefault
data-disabled

Present when the component is disabled.

data-title

Present when the component has a title.

Component.Part.Props
type ComponentPartProps = {
  /** The title to display */
  title: string;
  /** Whether the component is disabled */
  disabled?: boolean;
  input?: InputType;
  /** Child elements */
  children?: React.ReactNode;
}
Component.Part.State
type ComponentPartState = {
  /** Whether the part is visible */
  visible: boolean;
  /** Whether the part is expanded */
  expanded: boolean;
}

Additional Types

InputType
type InputType =
  | 'text'
  | 'number'
  | 'email'
  | 'password'
  | 'date'
  | 'checkbox'
  | 'radio'
  | 'file'
  | 'hidden'
  | 'submit'
  | 'reset'
  | 'button'
  | 'color'
  | 'datetime-local'
  | 'month'
  | 'range'
  | 'search'
  | 'tel'
  | 'time'
  | 'url'
  | 'week'
import * as React from 'react';
import { TypesComponent as ComponentTypes, TypesComponentAdditional } from './types';

export function TypesComponent() {
  return (
    <div>
      <h3>Component API</h3>
      <h3>Root</h3>
      <ComponentTypes.Root />
      <h3>Part</h3>
      <ComponentTypes.Part />
      <h3>Additional Types</h3>
      <TypesComponentAdditional />
    </div>
  );
}

Blocks Inherited

This demo shows how inherited types are rewritten to use the correct namespace. When AlertDialog.Trigger extends Dialog.Trigger, type references like DialogTriggerState are automatically rewritten to AlertDialog.Trigger.State in the documentation.

Alert Dialog API

Trigger

A button that opens the alert dialog. Renders a <button> element.

PropTypeDescription
disabled
boolean | undefined

Whether the trigger is disabled.

children
React.ReactNode | undefined

Child elements.

className
| string
| ((state: AlertDialog.Trigger.State) => string)
| undefined

CSS class applied to the trigger element. Can be a string or a function that receives the state.

AlertDialog.Trigger.Props
type AlertDialogTriggerProps = {
  /**
   * CSS class applied to the trigger element.
   * Can be a string or a function that receives the state.
   */
  className?: string | ((state: AlertDialog.Trigger.State) => string);
  /** Whether the trigger is disabled. */
  disabled?: boolean;
  /** Child elements. */
  children?: React.ReactNode;
}
AlertDialog.Trigger.State
type AlertDialogTriggerState = {
  /** Whether the alert requires user acknowledgment. */
  requiresAcknowledgment: boolean;
  /** Whether the dialog is currently open. */
  open: boolean;
  /** Whether the trigger is disabled. */
  disabled: boolean;
}

Close

A button that closes the dialog. Renders a <button> element.

PropTypeDescription
children
React.ReactNode | undefined

Child elements.

render
| ((
    triggerState: AlertDialog.Trigger.State,
  ) => React.ReactNode)
| undefined

Render function that receives the trigger state. This demonstrates a component depending on another component’s state type.

AlertDialog.Close.Props
type AlertDialogCloseProps = {
  /**
   * Render function that receives the trigger state.
   * This demonstrates a component depending on another component's state type.
   */
  render?: (triggerState: DialogTriggerState) => React.ReactNode;
  /** Child elements. */
  children?: React.ReactNode;
}
import * as React from 'react';
import { TypesAlertDialog as AlertDialogTypes } from './types';

export function TypesAlertDialog() {
  return (
    <div>
      <h3>Alert Dialog API</h3>
      <h3>Trigger</h3>
      <AlertDialogTypes.Trigger />
      <h3>Close</h3>
      <AlertDialogTypes.Close />
    </div>
  );
}

Class

This demo shows how to document TypeScript classes with constructors, methods, and properties. Classes are displayed with their constructor parameters and method signatures.

A handle for controlling dialog visibility imperatively.

Use this class to programmatically open or close dialogs without using React state.

Constructor Parameters
ParameterTypeDefaultDescription
initialOpen
boolean | undefined
false

Whether the dialog starts open.

Properties
PropertyTypeModifiersDescription
id
string
readonly

A unique identifier for this handle instance.

version
string
static, readonly

The version of the Handle class.

Methods
open

Opens the dialog.

Returns: 
boolean
—

Whether the operation succeeded.

close

Closes the dialog.

Returns: 
boolean
—

Whether the operation succeeded.

toggle

Toggles the dialog open/closed state.

Returns: 
void
import { createTypes } from './createTypes';
import { Handle } from './Handle';

export const TypesHandle = createTypes(import.meta.url, Handle);

How Inherited Type Rewriting Works

When you re-export components from a base namespace (e.g., Dialog → AlertDialog), the type system automatically rewrites type references to use the canonical namespace. This is powered by two mechanisms:

  1. extendsTypes: When an interface extends another type, a mapping is created:

    // AlertDialogTrigger.tsx
export interface AlertDialogTriggerState extends DialogTrigger.State {
  requiresAcknowledgment: boolean;
}

    This creates: DialogTrigger.State → AlertDialog.Trigger.State and DialogTriggerState → AlertDialog.Trigger.State

  2. reexportedFrom: When a component is re-exported with a different name, its origin is tracked:

    // AlertDialog/index.parts.ts
export { DialogClose as Close } from '../Dialog/DialogClose';

The type compatibility map is built once per syncTypes call and applied to all type strings, ensuring consistent naming across the documentation.

Type Conversion

Types are converted from HAST to React elements during component creation, not at runtime:

Formatted Types (Build-time)

From the webpack loader, stored as precomputed data:

interface FormattedProperty {
  type: HastRoot; // Syntax-highlighted HAST
  description?: HastRoot; // Parsed markdown HAST
  example?: HastRoot; // Parsed markdown HAST
  default?: HastRoot; // Syntax-highlighted HAST
  // ... other fields
}

Enhanced Types (Component Creation)

During the first render, typesToJsx converts HAST to React (memoized for performance):

interface EnhancedProperty {
  type: React.ReactNode; // Rendered JSX elements
  description?: React.ReactNode; // Rendered markdown
  example?: React.ReactNode; // Rendered examples
  default?: React.ReactNode; // Rendered defaults
  // ... other fields
}

The conversion happens on first render within TypesComponent:

// In your types.ts file
export const TypesButton = createTypes(import.meta.url, Button);

// Inside abstractCreateTypes (simplified):
function TypesComponent(props) {
  // Memoize the conversion from HAST to JSX (runs once on first render)
  const types = React.useMemo(() => typesToJsx(rawTypes, { components }), []);

  return <TypesTable {...props} types={types} />;
}

// In your TypesTable component:
function TypesTable(props) {
  const { types } = useTypes(props); // Already processed!
  return <div>{types[0].data.props.variant.type}</div>; // React.ReactNode
}

API

Hook for accessing types props in TypesTable components.

When rendered inside a TypesDataProvider, automatically registers the main type and additional types into the context so they can be looked up by name via useType(name), and registers their properties so they can be looked up via useTypeProp(typeName, propName).

ParameterTypeDescription
contentProps
TypesTableProps<{}>
Return Type
EnhancedClassProperty

An enhanced class property with HAST fields converted to React nodes. The components rendering each field are configured in createTypes().

type EnhancedClassProperty = {
  /** Plain text type string */
  typeText: string;
  /** Plain text default value */
  defaultText?: string;
  /** Whether the property is required */
  required?: true;
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  /** Plain text version of example for markdown generation */
  exampleText?: string;
  /**
   * Plain text version of
   * @see for markdown generation
   */
  seeText?: string;
  /** Plain text version of shortType for accessibility */
  shortTypeText?: string;
  /** Whether this is a static property */
  isStatic?: boolean;
  /** Whether this property is readonly */
  readonly?: boolean;
  /** Full type signature. Rendered by the `TypePre` component configured in `createTypes()`. */
  type: React.ReactNode;
  /** Compact type summary. Rendered by the `ShortTypeCode` component configured in `createTypes()`. */
  shortType?: React.ReactNode;
  /** Default value. Rendered by the `DefaultCode` component configured in `createTypes()`. */
  default?: React.ReactNode;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  /** Markdown example. Rendered using the `components` MDX map configured in `createTypes()`. */
  example?: React.ReactNode;
  /** Expanded type detail. Rendered by the `DetailedTypePre` component configured in `createTypes()`. */
  detailedType?: React.ReactNode;
  /** See-also links. Rendered using the `components` MDX map configured in `createTypes()`. */
  see?: React.ReactNode;
}
EnhancedClassTypeMeta

Enhanced class type metadata with React nodes instead of HAST. The components rendering each field are configured in createTypes().

type EnhancedClassTypeMeta = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  name: string;
  /** Type parameters (generics) if any */
  typeParameters?: string[];
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  constructorParameters: EnhancedParameter[];
  properties: Record<string, EnhancedClassProperty>;
  methods: Record<string, EnhancedMethod>;
}
EnhancedComponentTypeMeta

Enhanced component type metadata with React nodes instead of HAST. The components rendering each field are configured in createTypes().

type EnhancedComponentTypeMeta = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  name: string;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  props: Record<string, EnhancedProperty>;
  dataAttributes: Record<string, EnhancedEnumMember>;
  cssVariables: Record<string, EnhancedEnumMember>;
}
EnhancedEnumMember

An enhanced enum member (data attribute or CSS variable) with HAST fields converted to React nodes. The components rendering each field are configured in createTypes().

type EnhancedEnumMember = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  /** Full type signature. Rendered by the `TypePre` component configured in `createTypes()`. */
  type?: React.ReactNode;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  /** Default value. Rendered by the `DefaultCode` component configured in `createTypes()`. */
  default?: React.ReactNode;
}
EnhancedFunctionTypeMeta

Enhanced function type metadata with React nodes instead of HAST. The components rendering each field are configured in createTypes().

type EnhancedFunctionTypeMeta = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  name: string;
  /** Plain text version of returnValue for markdown generation (when returnValue is string) */
  returnValueText?: string;
  /** Plain text version of returnValueDescription for markdown generation */
  returnValueDescriptionText?: string;
  /** Original type name when return value was expanded from a named type reference */
  returnValueTypeName?: string;
  /** Type name of the expanded properties, when they came from a named type reference */
  expandedTypeName?: string;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  parameters?: EnhancedParameter[];
  expandedProperties?: Record<string, EnhancedProperty>;
  returnValue?: EnhancedFunctionReturnValue;
}
EnhancedHookParameter
EnhancedHookReturnValue

Discriminated union for hook return values.

type EnhancedHookReturnValue =
  | {
      kind: 'simple';
      type: React.ReactNode;
      description?: React.ReactNode;
      detailedType?: React.ReactNode;
    }
  | { kind: 'object'; typeName?: string; properties: Record<string, EnhancedProperty> }
EnhancedHookTypeMeta

Enhanced hook type metadata with React nodes instead of HAST. The components rendering each field are configured in createTypes().

type EnhancedHookTypeMeta = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  name: string;
  /** Plain text version of returnValue for markdown generation (when returnValue is string) */
  returnValueText?: string;
  /** Plain text version of returnValueDescription for markdown generation */
  returnValueDescriptionText?: string;
  /** Original type name when return value was expanded from a named type reference */
  returnValueTypeName?: string;
  /** Type name of the expanded properties, when they came from a named type reference */
  expandedTypeName?: string;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  parameters?: EnhancedParameter[];
  expandedProperties?: Record<string, EnhancedProperty>;
  returnValue?: EnhancedHookReturnValue;
  /** Markdown return value description. Rendered using the `components` MDX map configured in `createTypes()`. */
  returnValueDescription?: React.ReactNode;
}
EnhancedMethod

An enhanced class method with HAST fields converted to React nodes. The components rendering each field are configured in createTypes().

type EnhancedMethod = {
  descriptionText?: string;
  name: string;
  isStatic: boolean;
  returnValueDescriptionText?: string;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  parameters: EnhancedParameter[];
  /** Return type signature. Rendered by the `TypePre` component configured in `createTypes()`. */
  returnValue?: React.ReactNode;
  /** Markdown return value description. Rendered using the `components` MDX map configured in `createTypes()`. */
  returnValueDescription?: React.ReactNode;
}
EnhancedParameter

An enhanced function/hook parameter with HAST fields converted to React nodes. The components rendering each field are configured in createTypes().

type EnhancedParameter = {
  /** Plain text type string */
  typeText: string;
  /** Plain text default value */
  defaultText?: string;
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  /** Plain text version of example for markdown generation */
  exampleText?: string;
  /**
   * Plain text version of
   * @see for markdown generation
   */
  seeText?: string;
  /** Plain text version of shortType for accessibility */
  shortTypeText?: string;
  /** Parameter name */
  name: string;
  /** Whether the parameter is optional */
  optional?: true;
  /** Full type signature. Rendered by the `TypePre` component configured in `createTypes()`. */
  type: React.ReactNode;
  /** Compact type summary. Rendered by the `ShortTypeCode` component configured in `createTypes()`. */
  shortType?: React.ReactNode;
  /** Default value. Rendered by the `DefaultCode` component configured in `createTypes()`. */
  default?: React.ReactNode;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  /** Markdown example. Rendered using the `components` MDX map configured in `createTypes()`. */
  example?: React.ReactNode;
  /** Expanded type detail. Rendered by the `DetailedTypePre` component configured in `createTypes()`. */
  detailedType?: React.ReactNode;
  /** See-also links. Rendered using the `components` MDX map configured in `createTypes()`. */
  see?: React.ReactNode;
}
EnhancedProperty

An enhanced property with HAST fields converted to React nodes. The components rendering each field are configured in createTypes().

type EnhancedProperty = {
  /** Plain text type string */
  typeText: string;
  /** Plain text default value */
  defaultText?: string;
  /** Whether the property is required */
  required?: true;
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  /** Plain text version of example for markdown generation */
  exampleText?: string;
  /**
   * Plain text version of
   * @see for markdown generation
   */
  seeText?: string;
  /** Plain text version of shortType for accessibility */
  shortTypeText?: string;
  /** Full type signature. Rendered by the `TypePre` component configured in `createTypes()`. */
  type: React.ReactNode;
  /** Compact type summary. Rendered by the `ShortTypeCode` component configured in `createTypes()`. */
  shortType?: React.ReactNode;
  /** Default value. Rendered by the `DefaultCode` component configured in `createTypes()`. */
  default?: React.ReactNode;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  /** Markdown example. Rendered using the `components` MDX map configured in `createTypes()`. */
  example?: React.ReactNode;
  /** Expanded type detail. Rendered by the `DetailedTypePre` component configured in `createTypes()`. */
  detailedType?: React.ReactNode;
  /** See-also links. Rendered using the `components` MDX map configured in `createTypes()`. */
  see?: React.ReactNode;
}
EnhancedRawEnumMember

An enhanced raw type enum member.

type EnhancedRawEnumMember = {
  descriptionText?: string;
  name: string;
  value?: string | number;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
}
EnhancedRawTypeMeta

Enhanced raw/alias type metadata with React nodes instead of HAST. The components rendering each field are configured in createTypes().

type EnhancedRawTypeMeta = {
  /** Plain text version of description for markdown generation */
  descriptionText?: string;
  /** Display name for this type (may include dots like "Component.Root.State") */
  name: string;
  /**
   * For re-exports, information about the component this type re-exports from.
   * When set, indicates this should be rendered as a link to the component.
   */
  reExportOf?: ReExportInfo;
  /** For DataAttributes types, the component name this type belongs to. */
  dataAttributesOf?: string;
  /** For CssVars types, the component name this type belongs to. */
  cssVarsOf?: string;
  /** Markdown description. Rendered using the `components` MDX map configured in `createTypes()`. */
  description?: React.ReactNode;
  /** Formatted code block. Rendered by the `RawTypePre` component configured in `createTypes()`. */
  formattedCode: React.ReactNode;
  enumMembers?: EnhancedRawEnumMember[];
  properties?: Record<string, EnhancedProperty>;
}
EnhancedTypesMeta

Discriminated union of all enhanced type kinds. The components rendering each field are configured in createTypes().

type EnhancedTypesMeta = (
  | { type: 'component'; data: EnhancedComponentTypeMeta }
  | { type: 'hook'; data: EnhancedHookTypeMeta }
  | { type: 'function'; data: EnhancedFunctionTypeMeta }
  | { type: 'class'; data: EnhancedClassTypeMeta }
  | { type: 'raw'; data: EnhancedRawTypeMeta }
) & { name: string; slug?: string; aliases?: string[] }
TypesTableProps
type TypesTableProps<T extends {}> = T & {
  type: EnhancedTypesMeta | undefined;
  additionalTypes: EnhancedTypesMeta[];
  multiple?: boolean;
}