/** * Optimized React Hook for DOM-based lyric rendering * * This is a performance-optimized version that uses virtual DOM diffing * and RAF (RequestAnimationFrame) for smooth rendering. */ import { UseLyricHighlightOptions } from './useLyricHighlight'; import type { LyricLine, LyricTheme } from '../../types/components'; export interface UseLyricRendererOptimizedOptions extends UseLyricHighlightOptions { /** Theme or theme name */ theme?: LyricTheme | 'default' | 'karaoke' | 'minimal' | 'extreme-karaoke' | 'text-only'; /** Text-only mode: no container styling (default: false) */ textOnly?: boolean; /** Disable background styling (default: false) */ disableBackground?: boolean; /** Custom CSS classes */ classNames?: { container?: string; line?: string; word?: string; current?: string; prev?: string; next?: string; active?: string; inactive?: string; }; /** Render throttle in milliseconds (default: 16ms ~60fps) */ renderThrottle?: number; } export interface UseLyricRendererOptimizedReturn { /** Container ref to attach to DOM element */ containerRef: React.RefObject; /** Current line ref */ currentLineRef: React.RefObject; /** Manually trigger re-render */ forceUpdate: () => void; /** Scroll to line */ scrollToLine: (lineIndex: number) => void; } /** * Optimized hook for DOM-based lyric rendering with virtual DOM diffing * * @example * ```tsx * function LyricDisplay({ lyrics, currentTime }) { * const { containerRef } = useLyricRendererOptimized(lyrics, currentTime, { * displayMode: 'extreme-karaoke', * theme: 'extreme-karaoke', * renderThrottle: 16 // 60fps * }); * * return
; * } * ``` */ export declare function useLyricRendererOptimized(lyrics: LyricLine[], currentTime: number, options?: UseLyricRendererOptimizedOptions): UseLyricRendererOptimizedReturn;