React Window Hooks
Handle window events and observe window size
Features
🚀 Simple, fast and light🏭 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 (
// ...
)
}