1.1.1 • Published 3 years ago

@better-hooks/window v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

āš™ļø 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 (
    // ...
  )
}