abc-hx

React hooks package for common UI utilities in the ABC system. This package provides reusable hooks for debouncing, responsive design, theme management, and screen resizing.

📦 Installation

pnpm add abc-hx

🚀 Key Features

1. Debouncing

• Optimize performance by limiting update rates
• Support for both number and string values
• Configurable delay timing

2. Responsive Design

• Mobile detection with customizable breakpoints
• Screen resize handling with automatic reload
• Real-time responsive state management

3. Theme Management

• Light, dark, and system theme support
• Automatic theme persistence in localStorage
• CSS class management for theme switching

4. Screen Resize

• Monitor screen size changes
• Automatic page reload on breakpoint changes
• Configurable mobile breakpoint

📚 API Reference

useDebounce(value, delay)

Returns a debounced version of the input value that updates after a specified delay.

import { useDebounce } from "abc-hx";

const debouncedValue = useDebounce(searchTerm, 500);

Parameters:

• value: number | string - The value to debounce
• delay: number - The debounce delay in milliseconds

Returns: number | string - The debounced value

Example:

import { useDebounce } from "abc-hx";

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    // This effect will only run when debouncedSearchTerm changes
    // after 500ms of no changes to searchTerm
    performSearch(debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}

useIsMobile()

Detects if the current screen size is mobile (≤768px).

import { useIsMobile } from "abc-hx";

const isMobile = useIsMobile();

Returns: boolean - True if screen width is ≤768px

Example:

import { useIsMobile } from "abc-hx";

function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return (
    <div>
      {isMobile ? (
        <MobileLayout />
      ) : (
        <DesktopLayout />
      )}
    </div>
  );
}

useScreenResize()

Monitors screen size changes and automatically reloads the page when switching between mobile and desktop breakpoints.

import { useScreenResize } from "abc-hx";

useScreenResize();

Breakpoint: 414px (mobile breakpoint)

Example:

import { useScreenResize } from "abc-hx";

function App() {
  useScreenResize(); // Automatically reloads on breakpoint change

  return (
    <div>
      {/* Your app content */}
    </div>
  );
}

useTheme()

Manages theme state with support for light, dark, and system themes.

import { useTheme } from "abc-hx";

const { theme, toggleTheme } = useTheme();

Returns: { theme: string, toggleTheme: (theme: ThemeMode) => void }

ThemeMode: "light" | "dark" | "system"

Example:

import { useTheme } from "abc-hx";

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      <button onClick={() => toggleTheme("light")}>
        Light
      </button>
      <button onClick={() => toggleTheme("dark")}>
        Dark
      </button>
      <button onClick={() => toggleTheme("system")}>
        System
      </button>
      <p>Current theme: {theme}</p>
    </div>
  );
}

🔧 Usage Examples

Complete Example with Multiple Hooks

import { useDebounce, useIsMobile, useTheme } from "abc-hx";

function AdvancedComponent() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 300);
  const isMobile = useIsMobile();
  const { theme, toggleTheme } = useTheme();

  useEffect(() => {
    // Perform search with debounced term
    if (debouncedSearchTerm) {
      performSearch(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <div className={`app ${theme}`}>
      <div className="header">
        <input
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Search..."
          className={isMobile ? "mobile-input" : "desktop-input"}
        />
        <button onClick={() => toggleTheme(theme === "dark" ? "light" : "dark")}>
          Toggle Theme
        </button>
      </div>

      <div className={isMobile ? "mobile-content" : "desktop-content"}>
        {/* Responsive content */}
      </div>
    </div>
  );
}

Theme Management with CSS

/* Your CSS file */
.app.light {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.app.dark {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

.app {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

📋 Type Definitions

// useDebounce
function useDebounce(value: number | string, delay: number): number | string;

// useIsMobile
function useIsMobile(): boolean;

// useScreenResize
function useScreenResize(): void;

// useTheme
type ThemeMode = "light" | "dark" | "system";

interface UseThemeReturn {
  theme: string;
  toggleTheme: (theme: ThemeMode) => void;
}

function useTheme(): UseThemeReturn;

🔧 Development

# Build package
pnpm build

# Development mode with watch
pnpm dev

# Type checking
pnpm check-types

# Lint
pnpm lint

# Clean dist
pnpm clean

📦 Dependencies

Development Dependencies

• @testing-library/jest-dom - Jest DOM matchers
• @repo/eslint-config - ESLint configuration
• @testing-library/react - React testing utilities
• @types/jest - Jest types
• @types/node - Node.js types
• tsup - TypeScript bundler
• typescript - TypeScript compiler

🧪 Testing

All hooks include comprehensive test coverage:

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

📄 License

ISC