Browser APIs

/**
 * Clipboard API integration with status tracking
 * @param options - Configuration for timeout
 * @returns Object with copy function, status, and error
 */
function useClipboard(options?: UseClipboardOptions): UseClipboardReturnValue;

interface UseClipboardOptions {
  timeout?: number; // Duration to show "copied" state (default: 2000ms)
}

interface UseClipboardReturnValue {
  copy: (value: any) => void;
  reset: () => void;
  error: Error | null;
  copied: boolean;
}

import { useClipboard } from "@mantine/hooks";

function CopyButton({ text }: { text: string }) {
  const clipboard = useClipboard({ timeout: 2000 });
  
  return (
    <button
      onClick={() => clipboard.copy(text)}
      style={{ color: clipboard.copied ? 'green' : 'black' }}
    >
      {clipboard.copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

// Copy complex data
function ShareButton({ data }: { data: object }) {
  const clipboard = useClipboard();
  
  const handleShare = () => {
    clipboard.copy(JSON.stringify(data, null, 2));
  };
  
  if (clipboard.error) {
    return <div>Failed to copy: {clipboard.error.message}</div>;
  }
  
  return <button onClick={handleShare}>Share Data</button>;
}

/**
 * Detect system color scheme preference
 * @param defaultValue - Fallback value if detection fails
 * @returns Current color scheme ('dark' or 'light')
 */
function useColorScheme(defaultValue?: UseColorSchemeValue): UseColorSchemeValue;

type UseColorSchemeValue = 'dark' | 'light';

import { useColorScheme } from "@mantine/hooks";

function ThemedComponent() {
  const colorScheme = useColorScheme('light');
  
  return (
    <div style={{
      background: colorScheme === 'dark' ? '#000' : '#fff',
      color: colorScheme === 'dark' ? '#fff' : '#000'
    }}>
      Current theme: {colorScheme}
    </div>
  );
}

/**
 * React to CSS media query changes
 * @param query - CSS media query string
 * @param initialValue - Initial value for SSR
 * @param options - Configuration for effect timing
 * @returns Boolean indicating if media query matches
 */
function useMediaQuery(
  query: string,
  initialValue?: boolean,
  options?: UseMediaQueryOptions
): boolean;

interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean; // Prevent SSR hydration issues
}

import { useMediaQuery } from "@mantine/hooks";

function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const isLandscape = useMediaQuery('(orientation: landscape)');
  
  return (
    <div>
      <p>Mobile: {isMobile ? 'Yes' : 'No'}</p>
      <p>Dark mode: {isDarkMode ? 'Yes' : 'No'}</p>
      <p>Landscape: {isLandscape ? 'Yes' : 'No'}</p>
    </div>
  );
}

// SSR-safe usage
function SSRComponent() {
  const isLargeScreen = useMediaQuery('(min-width: 1200px)', false, {
    getInitialValueInEffect: true
  });
  
  return isLargeScreen ? <DesktopLayout /> : <MobileLayout />;
}

/**
 * Track viewport dimensions
 * @returns Object with current height and width
 */
function useViewportSize(): { height: number; width: number };

import { useViewportSize } from "@mantine/hooks";

function ViewportInfo() {
  const { height, width } = useViewportSize();
  
  return (
    <div>
      Viewport: {width} × {height}
      {width < 768 && <MobileWarning />}
    </div>
  );
}

/**
 * Track and control window scroll position
 * @returns Object with scroll position and scroll control function
 */
function useWindowScroll(): UseWindowScrollReturnValue;

interface UseWindowScrollPosition {
  x: number;
  y: number;
}

interface UseWindowScrollTo {
  (options: ScrollToOptions): void;
  (x: number, y: number): void;
}

interface UseWindowScrollReturnValue {
  x: number;
  y: number;
  scrollTo: UseWindowScrollTo;
}

import { useWindowScroll } from "@mantine/hooks";

function ScrollInfo() {
  const { x, y, scrollTo } = useWindowScroll();
  
  return (
    <div>
      <p>Scroll position: {x}, {y}</p>
      <button onClick={() => scrollTo({ top: 0, behavior: 'smooth' })}>
        Scroll to top
      </button>
      <button onClick={() => scrollTo(0, 500)}>
        Scroll to 500px
      </button>
    </div>
  );
}

/**
 * Fullscreen API integration
 * @returns Object with ref, fullscreen controls, and state
 */
function useFullscreen<T extends HTMLElement = any>(): UseFullscreenReturnValue<T>;

interface UseFullscreenReturnValue<T extends HTMLElement = any> {
  ref: React.RefCallback<T | null>;
  toggle: () => Promise<void>;
  enter: () => Promise<void>;
  exit: () => Promise<void>;
  fullscreen: boolean;
}

import { useFullscreen } from "@mantine/hooks";

function VideoPlayer() {
  const { ref, toggle, fullscreen } = useFullscreen();
  
  return (
    <div ref={ref}>
      <video src="/video.mp4" />
      <button onClick={toggle}>
        {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
      </button>
    </div>
  );
}

/**
 * Manage document title
 * @param title - Title to set
 */
function useDocumentTitle(title: string): void;

import { useDocumentTitle } from "@mantine/hooks";

function ProductPage({ product }: { product: Product }) {
  useDocumentTitle(`${product.name} - My Store`);
  
  return <div>{product.name}</div>;
}

/**
 * Track document visibility state
 * @returns Current visibility state
 */
function useDocumentVisibility(): DocumentVisibilityState;

import { useDocumentVisibility } from "@mantine/hooks";

function VideoPlayer() {
  const documentState = useDocumentVisibility();
  
  // Pause video when tab is not visible
  useEffect(() => {
    if (documentState === 'hidden') {
      pauseVideo();
    } else {
      resumeVideo();
    }
  }, [documentState]);
  
  return <video />;
}

/**
 * Dynamically change favicon
 * @param url - URL of the favicon
 */
function useFavicon(url: string): void;

/**
 * Detect when user leaves page
 * @param fn - Function to call when user leaves
 */
function usePageLeave(fn: () => void): void;

/**
 * Manage URL hash
 * @param options - Configuration for effect timing
 * @returns Object with current hash and setter
 */
function useHash(options?: UseHashOptions): UseHashReturnValue;

interface UseHashOptions {
  getInitialValueInEffect?: boolean;
}

interface UseHashReturnValue {
  hash: string;
  setHash: (value: string) => void;
}

import { useHash } from "@mantine/hooks";

function TabsWithHash() {
  const { hash, setHash } = useHash();
  const activeTab = hash.replace('#', '') || 'overview';
  
  return (
    <div>
      <button 
        onClick={() => setHash('overview')}
        className={activeTab === 'overview' ? 'active' : ''}
      >
        Overview
      </button>
      <button 
        onClick={() => setHash('details')}
        className={activeTab === 'details' ? 'active' : ''}
      >
        Details
      </button>
      
      {activeTab === 'overview' && <OverviewTab />}
      {activeTab === 'details' && <DetailsTab />}
    </div>
  );
}