or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

client-hooks.mdindex.mdplugin-configuration.mdsidebar-system.mdversion-management.md
tile.json

client-hooks.mddocs/

Client Hooks

React hooks for accessing documentation data, navigation state, and sidebar information in Docusaurus themes and components.

Capabilities

Core Data Hooks

Hooks for accessing plugin data and active plugin information.

/**
 * Gets documentation data for all plugin instances
 * @returns Object mapping plugin IDs to their data, or empty object if no docs plugins
 */
function useAllDocsData(): {[pluginId: string]: GlobalPluginData};

/**
 * Gets documentation data for a specific plugin instance
 * @param pluginId - Plugin instance ID, or undefined for default instance
 * @returns Plugin data for the specified instance
 * @throws Error if plugin not found or not enabled
 */
function useDocsData(pluginId: string | undefined): GlobalPluginData;

/**
 * Gets currently active docs plugin based on current route
 * @param options - Data options with failfast and other settings
 * @returns Active plugin info or undefined if not on docs route
 */
function useActivePlugin(options?: UseDataOptions): ActivePlugin | undefined;

/**
 * Gets active plugin and version information
 * @param options - Data options with failfast and other settings
 * @returns Object with active plugin and version, or undefined
 */
function useActivePluginAndVersion(
  options?: UseDataOptions
): {activePlugin: ActivePlugin; activeVersion: GlobalVersion | undefined} | undefined;

Usage Examples:

import { useDocsData, useActivePlugin } from '@docusaurus/plugin-content-docs/client';

function MyComponent() {
  // Get data for default docs plugin
  const docsData = useDocsData(undefined);
  
  // Get currently active plugin
  const activePlugin = useActivePlugin();
  
  // Get all docs data across plugins
  const allDocsData = useAllDocsData();
  
  return (
    <div>
      <h2>{docsData.versions[0].label}</h2>
      {activePlugin && <p>Active: {activePlugin.pluginId}</p>}
    </div>
  );
}

Version Hooks

Hooks for accessing version information and active version state.

/**
 * Gets all versions for a plugin, ordered most recent first
 * @param pluginId - Plugin instance ID
 * @returns Array of version objects
 */
function useVersions(pluginId: string | undefined): GlobalVersion[];

/**
 * Gets the latest version for a plugin
 * @param pluginId - Plugin instance ID
 * @returns Latest version object
 */
function useLatestVersion(pluginId: string | undefined): GlobalVersion;

/**
 * Gets currently active version based on route
 * @param pluginId - Plugin instance ID
 * @returns Active version or undefined if not on docs route
 */
function useActiveVersion(pluginId: string | undefined): GlobalVersion | undefined;

/**
 * Gets active document context with version and doc info
 * @param pluginId - Plugin instance ID
 * @returns Context with active version, doc, and alternate versions
 */
function useActiveDocContext(pluginId: string | undefined): ActiveDocContext;

/**
 * Gets version suggestions for showing version switcher
 * @param pluginId - Plugin instance ID
 * @returns Suggestions for latest version and latest doc
 */
function useDocVersionSuggestions(pluginId: string | undefined): DocVersionSuggestions;

Document and Sidebar Hooks

Hooks for accessing document metadata and sidebar navigation state.

/**
 * Gets document by ID from current version
 * @param docId - Document ID to retrieve
 * @returns Document metadata or null if not found
 */
function useDocById(docId: string): DocMetadata | null;

/**
 * Gets current document from context
 * @returns Current document metadata and content
 */
function useDoc(): DocContextValue;

/**
 * Gets visible sidebar items based on current state
 * @param sidebar - Sidebar configuration
 * @returns Array of visible sidebar items
 */
function useVisibleSidebarItems(sidebar: PropSidebar): PropSidebarItem[];

/**
 * Gets breadcrumbs for current sidebar location
 * @returns Array of breadcrumb items
 */
function useSidebarBreadcrumbs(): PropSidebarBreadcrumbsItem[];

/**
 * Gets current sidebar category if inside one
 * @returns Current category or null
 */
function useCurrentSidebarCategory(): PropSidebarItemCategory | null;

/**
 * Gets siblings of current sidebar item
 * @returns Object with previous and next siblings
 */
function useCurrentSidebarSiblings(): {
  previous?: PropSidebarItem;
  next?: PropSidebarItem;
};

Layout and Context Hooks

Hooks for accessing layout-specific data and managing component state.

/**
 * Gets layout document data for theme components
 * @returns Layout-specific document data
 */
function useLayoutDoc(): PropDocContent;

/**
 * Gets layout sidebar data for theme components
 * @returns Layout-specific sidebar data
 */
function useLayoutDocsSidebar(): PropSidebar;

/**
 * Gets document root metadata for theme integration
 * @returns Root document metadata
 */
function useDocRootMetadata(): DocMetadata;

/**
 * Gets version candidates for document routing
 * @param docsPluginId - Plugin ID for docs
 * @returns Array of version candidates
 */
function useDocsVersionCandidates(docsPluginId: string): GlobalVersion[];

Context Providers and State Management

Providers and hooks for managing component state and preferred versions.

/**
 * Provider for managing preferred version across the site
 */
function DocsPreferredVersionContextProvider(props: {
  children: React.ReactNode;
}): React.ReactElement;

/**
 * Hook for accessing and setting preferred version
 * @param pluginId - Plugin instance ID
 * @returns Preferred version info and setter function
 */
function useDocsPreferredVersion(pluginId: string | undefined): {
  preferredVersion: GlobalVersion | null;
  savePreferredVersionName: (versionName: string) => void;
};

/**
 * Hook for accessing preferred version by plugin ID
 * @param pluginId - Plugin instance ID
 * @returns Preferred version or null
 */
function useDocsPreferredVersionByPluginId(pluginId: string): GlobalVersion | null;

/**
 * Provider for docs version context
 */
function DocsVersionProvider(props: {
  children: React.ReactNode;
  version: PropVersionMetadata;
}): React.ReactElement;

/**
 * Hook for accessing current docs version
 * @returns Current version metadata
 */
function useDocsVersion(): PropVersionMetadata;

/**
 * Provider for docs sidebar context
 */
function DocsSidebarProvider(props: {
  children: React.ReactNode;
  sidebar: PropSidebar;
}): React.ReactElement;

/**
 * Hook for accessing current docs sidebar
 * @returns Current sidebar configuration
 */
function useDocsSidebar(): PropSidebar;

/**
 * Provider for document context
 */
function DocProvider(props: {
  children: React.ReactNode;
}): React.ReactElement;

Sidebar State Management

Hooks for managing sidebar expanded/collapsed state.

/**
 * Provider for sidebar items expanded state
 */
function DocSidebarItemsExpandedStateProvider(props: {
  children: React.ReactNode;
}): React.ReactElement;

/**
 * Hook for managing sidebar item expanded state
 * @returns State and functions for managing expanded items
 */
function useDocSidebarItemsExpandedState(): {
  expandedItems: string[];
  setExpandedItems: (items: string[]) => void;
  toggleExpandedItem: (itemId: string) => void;
};

Search Integration

Hooks for search functionality and contextual search tags.

/**
 * Gets contextual search tags for current docs context
 * @returns Array of search tags for current context
 */
function useDocsContextualSearchTags(): string[];

/**
 * Gets version-specific search tag
 * @param pluginId - Plugin instance ID
 * @param versionName - Version name
 * @returns Search tag for the version
 */
function getDocsVersionSearchTag(pluginId: string, versionName: string): string;

SEO and Structured Data

Hooks for generating structured data for SEO.

/**
 * Gets structured data for breadcrumbs
 * @returns Structured data object for breadcrumbs
 */
function useBreadcrumbsStructuredData(): object;

Navigation Utilities

Utility functions for converting navigation items and documents to navigation links.

/**
 * Converts navigation item to navigation link
 * @param navigationItem - Navigation item to convert
 * @param docsById - Map of doc IDs to metadata
 * @returns Navigation link or undefined
 */
function toNavigationLink(
  navigationItem: SidebarNavigationItem,
  docsById: {[docId: string]: DocMetadata}
): PropNavigationLink | undefined;

/**
 * Converts document to navigation link
 * @param doc - Document metadata
 * @param options - Conversion options
 * @returns Navigation link
 */
function toDocNavigationLink(
  doc: DocMetadata,
  options?: {forNavigationLink?: boolean}
): PropNavigationLink;

Utility Functions

/**
 * Finds sidebar category by predicate function
 * @param sidebar - Sidebar to search
 * @param predicate - Function to test category items
 * @returns Found category or undefined
 */
function findSidebarCategory(
  sidebar: PropSidebar,
  predicate: (category: PropSidebarItemCategory) => boolean
): PropSidebarItemCategory | undefined;

/**
 * Finds first sidebar item link
 * @param sidebar - Sidebar to search
 * @returns First link item or undefined
 */
function findFirstSidebarItemLink(sidebar: PropSidebar): PropSidebarItemLink | undefined;

/**
 * Checks if sidebar item is currently active
 * @param item - Sidebar item to check
 * @param activePath - Current active path
 * @returns True if item is active
 */
function isActiveSidebarItem(item: PropSidebarItem, activePath: string): boolean;

/**
 * Checks if sidebar item should be visible
 * @param item - Sidebar item to check
 * @returns True if item should be visible
 */
function isVisibleSidebarItem(item: PropSidebarItem): boolean;

/**
 * Filters doc card list items based on criteria
 * @param items - Items to filter
 * @param predicate - Filter predicate function
 * @returns Filtered items array
 */
function filterDocCardListItems<T>(
  items: T[],
  predicate: (item: T) => boolean
): T[];

Types

interface GlobalPluginData {
  path: string;
  versions: GlobalVersion[];
  breadcrumbs: boolean;
}

interface GlobalVersion {
  name: string;
  label: string;
  isLast: boolean;
  path: string;
  mainDocId: string;
  docs: GlobalDoc[];
  draftIds: string[];
  sidebars?: {[sidebarId: string]: GlobalSidebar};
}

interface GlobalDoc {
  id: string;
  path: string;
  sidebar?: string;
  unlisted?: boolean;
}

interface ActivePlugin {
  pluginId: string;
  pluginData: GlobalPluginData;
}

interface ActiveDocContext {
  activeVersion?: GlobalVersion;
  activeDoc?: GlobalDoc;
  alternateDocVersions: {[versionName: string]: GlobalDoc};
}

interface DocVersionSuggestions {
  latestVersionSuggestion: GlobalVersion;
  latestDocSuggestion?: GlobalDoc;
}

interface DocContextValue {
  metadata: DocMetadata;
  frontMatter: DocFrontMatter;
  assets: Assets;
  contentTitle?: string;
}

interface UseDataOptions {
  failfast?: boolean;
}