https://github.com/bettertyped/react-window-hooks
⚙️ Set of hooks that allow handling lifecycle window and document events, window size, window scroll position and window focus state.
https://github.com/bettertyped/react-window-hooks
blur document-events events focus lifecycle react react-hooks scroll typescript window window-events window-scroll window-size
Last synced: 4 months ago
JSON representation
⚙️ Set of hooks that allow handling lifecycle window and document events, window size, window scroll position and window focus state.
- Host: GitHub
- URL: https://github.com/bettertyped/react-window-hooks
- Owner: BetterTyped
- License: mit
- Created: 2022-07-29T20:25:03.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-29T12:22:14.000Z (almost 3 years ago)
- Last Synced: 2025-04-29T15:39:42.378Z (6 months ago)
- Topics: blur, document-events, events, focus, lifecycle, react, react-hooks, scroll, typescript, window, window-events, window-scroll, window-size
- Language: TypeScript
- Homepage:
- Size: 508 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: Contributing.md
- License: LICENSE
- Code of conduct: Code_of_Conduct.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# ⚙️ 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
```bash
npm install --save @better-hooks/window
```
or
```bash
yarn add @better-hooks/window
```
---
## Examples
#### useWindowEvent
```tsx
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
```tsx
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
```tsx
import React from "react";
import { useWindowSize } from "@better-hooks/window";
const MyComponent: React.FC = () => {
// Updates with resizing
const [width, height] = useWindowSize()
return (
// ...
)
}
```
---
#### useWindowScroll
```tsx
import React from "react";
import { useWindowScroll } from "@better-hooks/window";
const MyComponent: React.FC = () => {
// Updates when scrolling
const [x, y] = useWindowScroll()
return (
// ...
)
}
```
---
#### useWindowFocus
```tsx
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 (
// ...
)
}
```