151 lines
3.1 KiB
Markdown
151 lines
3.1 KiB
Markdown
# 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
|