⚙️ React Window hooks

About

Handle window events and observe window size

Key Features

🔮 Simple usage

🚀 Fast and light

✨ Lifecycle Window events

💎 Lifecycle Document events

🎯 Window size

🪄 Window scroll position

💡 Window focus

🎊 SSR Support

Installation

npm install --save @better-hooks/window

or

yarn add @better-hooks/window

Examples

useWindowEvent

import React from "react";
import { useWindowEvent } from "@better-hooks/window";

const MyComponent: React.FC = () => {
  // Unmounts event with component lifecycle
  useWindowEvent("scroll", () => {
    // ... Do something
  });

  useWindowEvent("wheel", () => {
    // ... Do something
  });

  useWindowEvent("resize", () => {
    // ... Do something
  });

  return (
    // ...
  )
}

useDocumentEvent

import React from "react";
import { useDocumentEvent } from "@better-hooks/window";

const MyComponent: React.FC = () => {
  // Unmounts event with component lifecycle
  useDocumentEvent("visibilitychange", () => {
    // ... Do something
  });

  useDocumentEvent("scroll", () => {
    // ... Do something
  });

  return (
    // ...
  )
}

useWindowSize

import React from "react";
import { useWindowSize } from "@better-hooks/window";

const MyComponent: React.FC = () => {
  // Updates with resizing
  const [width, height] = useWindowSize()

  return (
    // ...
  )
}

useWindowScroll

import React from "react";
import { useWindowScroll } from "@better-hooks/window";

const MyComponent: React.FC = () => {
  // Updates when scrolling
  const [x, y] = useWindowScroll()

  return (
    // ...
  )
}

useWindowFocus

import React from "react";
import { useWindowFocus } from "@better-hooks/window";

const MyComponent: React.FC = () => {
  // Updates when user leave our page
  const focus = useWindowFocus()

  useEffect(() => {
    if(focus) {
      // User is using our page
    } else {
      // User has minimized window or leaved our page to different tab
    }
  }, [focus])

  return (
    // ...
  )
}