gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/other/hooks.md

Vuer UIKit Hooks Documentation

Overview

Vuer UIKit provides a collection of React hooks designed to be SSR-safe and fully typed with TypeScript support. All hooks return undefined during server-side rendering and properly hydrate on the client side.

Available Hooks

useLocation

Tracks the current browser location and automatically updates when navigation occurs.

Usage:

import { useLocation } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const location = useLocation();

  if (!location) {
    return null; // Handle SSR or initial load
  }

  return (
    <div>
      <p>Current path: {location.pathname}</p>
      <p>Query params: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
}

useWindow

Provides safe access to the window object in server-side rendering environments.

Usage:

import { useWindow } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const window = useWindow();

  useEffect(() => {
    if (window) {
      console.log('Window width:', window.innerWidth);
    }
  }, [window]);

  return <div>Component content</div>;
}

useDocument

Enables safe access to the document object in SSR environments.

Usage:

import { useDocument } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const document = useDocument();

  useEffect(() => {
    if (document) {
      const element = document.getElementById('my-element');
    }
  }, [document]);

  return <div>Component content</div>;
}

useLocalStorage

Maintains a stateful value synchronized with browser local storage.

Usage:

import { useLocalStorage } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
    </button>
  );
}

useIsMobile

Detects whether the current device is mobile based on viewport width. Useful for conditional rendering of mobile versus desktop layouts.

Usage:

import { useIsMobile } from '@vuer-ai/vuer-uikit';

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

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

useDragSelect

Enables drag selection functionality for selectable elements.

Usage:

import { useDragSelect } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const { selectedKeys, setSelectedKeys } = useDragSelect();

  return (
    <div>
      {items.map(item => (
        <div
          key={item.id}
          data-selectable={item.id}
          className={selectedKeys.has(item.id) ? 'selected' : ''}
        >
          {item.name}
        </div>
      ))}
    </div>
  );
}

useQueryParams

Handles URL query parameter management and updates.

Key Features

• SSR-Safe: All hooks safely handle server-side rendering environments
• TypeScript Support: Fully typed with automatic handling of optional values during SSR
• No Errors: Browser API hooks won't throw errors on the server
• Client Hydration: State properly syncs between server and client