Hooks

Explore the collection of React hooks provided by Vuer UIKit. All hooks are designed to be SSR-safe and provide TypeScript support out of the box.

Usage Examples

useLocation

The useLocation hook provides access to the current browser location and automatically updates when navigation occurs.

Current Location

SSR

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

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

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

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

useWindow

The useWindow hook provides safe access to the window object in SSR environments.

Window Info

SSR

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

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

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

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

useDocument

The useDocument hook provides safe access to the document object in SSR environments.

Document Info

SSR

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

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

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

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

useLocalStorage

The useLocalStorage hook provides a stateful value synced with localStorage.

LocalStorage Demo
Stored: initial
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

The useIsMobile hook detects if the current device is mobile based on viewport width.

Mobile Detection
Device:Desktop

Resize window to test

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

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

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

useDragSelect

The useDragSelect hook enables drag selection functionality for selectable elements.

Drag Select Demo
Item 1
Item 2
Item 3

Click or drag to select

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>
  );
}

SSR Considerations

All hooks in Vuer UIKit are designed to work safely in server-side rendering environments:

  • Hooks that access browser APIs (window, document, localStorage) return undefined during SSR
  • State is properly hydrated on the client side
  • No errors are thrown during server-side rendering

TypeScript Support

All hooks are fully typed with TypeScript. The return types automatically handle the SSR case where values might be undefined.

TypeScript Support
⏳ SSR handling
location is undefined
import { useLocation } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  const location = useLocation();
  // TypeScript knows location might be undefined

  if (location) {
    // TypeScript knows all location properties are available here
    console.log(location.pathname);
  }
}