use-viewport

PreviousNext
Docs
reuihook

Preview

Loading preview…
registry/default/hooks/use-viewport.ts
import { useEffect, useState } from 'react';

type TUseViewport = [number, number];

const useViewport = (): TUseViewport => {
  const [dimensions, setDimensions] = useState<TUseViewport>([window.innerHeight, window.innerWidth]);

  useEffect(() => {
    const handleResize = (): void => {
      setDimensions([window.innerHeight, window.innerWidth]);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return dimensions;
};

export { useViewport };

Installation

npx shadcn@latest add @reui/use-viewport

Usage

import { UseViewport } from "@/hooks/use-viewport"
const value = UseViewport()