@hua-labs/hooks

A collection of commonly used React hooks optimized for the hua ecosystem. Provides loading state management, auto-scroll functionality, and performance monitoring.

Features

• useLoading — Loading state with delay, message, and async wrapper
• useAutoScroll — Auto-scroll for chat-like interfaces with threshold control
• usePerformanceMonitor — Runtime FPS, frame time, and memory tracking

Installation

pnpm add @hua-labs/hooks

Peer dependencies: react >=19.0.0

Quick Start

import { useLoading, useAutoScroll } from '@hua-labs/hooks';

function ChatView({ messages }: { messages: Message[] }) {
  const { isLoading, withLoading } = useLoading({ delay: 200 });
  const { containerRef, scrollToBottom } = useAutoScroll([messages]);

  const handleSend = () => withLoading(() => sendMessage(), 'Sending...');

  return (
    <div ref={containerRef} style={{ overflow: 'auto', height: 400 }}>
      {messages.map((m) => <Message key={m.id} {...m} />)}
      {isLoading && <Spinner />}
    </div>
  );
}

API

| Export | Type | Description | |--------|------|-------------| | useLoading | hook | Async loading state management with delay and message | | useAutoScroll | hook | Chat-style auto-scroll with threshold control | | usePerformanceMonitor | hook | Runtime FPS, frame time, and memory tracking | | UseLoadingOptions | type | | | UseLoadingReturn | type | | | UseAutoScrollOptions | type | | | UseAutoScrollReturn | type | | | PerformanceMonitorMetrics | type | | | UsePerformanceMonitorOptions | type | |

Related Packages

• @hua-labs/hua
• @hua-labs/ui

License

MIT — HUA Labs