Use Types

Access processed type information within a TypesContent 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
• Enables future context-based enhancements (e.g., interactive type exploration)
• 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)
    ↓
TypesContent 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
• Display: Your components render the processed React nodes

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

Basic Usage

Basic

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

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.

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.

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

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

Blocks

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

import * as React from 'react';
import { TypesComponentPart, TypesComponentRoot } from './types';

export function TypesComponent() {
  return (
    <div>
      <h3>ComponentRoot</h3>
      <TypesComponentRoot />
      <h3>ComponentPart</h3>
      <TypesComponentPart />
    </div>
  );
}

Blocks Data Attr

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

import * as React from 'react';
import { TypesComponentPart, TypesComponentRoot } from './types';

export function TypesComponent() {
  return (
    <div>
      <h3>ComponentRoot</h3>
      <TypesComponentRoot />
      <h3>ComponentPart</h3>
      <TypesComponentPart />
    </div>
  );
}

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
}

Processed Types (Component Creation)

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

interface ProcessedProperty {
  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 <TypesContent {...props} types={types} />;
}

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

API

See Types

Related

• abstractCreateTypes: Factory functions where type processing happens
• typesToJsx: Function that converts HAST to React nodes
• loadPrecomputedTypesMeta: Build-time loader that extracts types as HAST
• HAST Pattern: Understanding the HAST format