useWindowSize

Simplifies video handling, includes play, pause and reset methods. Also includes volume and playrate controls, along with fullscreen request.

Installation

npx rabbithook@latest add use-window-size

Usage

App.tsx

import useWindowSize from "@/hooks/use-window-size";

function Component() {
  const { width, height } = useWindowSize();

  return (
    <>
      <p>Width: { width }</p>
      <p>Height: { height }</p>
    </>
  )
}

Code

Typescript

use-async.ts

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useWindowSize() {
	const [windowSize, setWindowSize] = useState({
		width: window.innerWidth,
		height: window.innerHeight
	})

	useEventListener("resize", () => {
		setWindowSize({
			width: window.innerWidth,
			height: window.innerHeight
		})
	})

	return windowSize;
}

export default useWindowSize;

Javascript

use-async.js

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  })

  useEventListener("resize", () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    })
  })

  return windowSize;
}

export default useWindowSize;