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

``