Package Exports

@better-typed/react-window-hooks
@better-typed/react-window-hooks/dist/index.cjs.js
@better-typed/react-window-hooks/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@better-typed/react-window-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Window Hooks

npm bundle size npm type definitions NPM npm

Handle window events and observe window size

Better Typed

Features

🚀 Simple, fast and light
🏭 Observe window size
🪗 Lifecycle window events handling

Install

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

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 (
    // ...
  )
}