React Window Hooks

Handle window events and observe window size

• Better Typed

Features

• :rocket: Simple, fast and light
• :factory: Observe window size
• 🪗 Lifecycle window events handling

Install

npm install --save @better-typed/react-window-hooks

or

yarn add @better-typed/react-window-hooks

useWindowEvent

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

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

  return (
    // ...
  )
}

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

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

  return (
    // ...
  )
}

useWindowSize

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

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

  return (
    // ...
  )
}