Initial commit

docs/other/hooks.md

@@ -0,0 +1,150 @@
+# 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