# 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:**
```jsx
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:**
```jsx
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:**
```jsx
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:**
```jsx
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:**
```jsx
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:**
```jsx
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