https://github.com/flexcodelabs/use-events-hooks
https://github.com/flexcodelabs/use-events-hooks
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/flexcodelabs/use-events-hooks
- Owner: flexcodelabs
- Created: 2022-07-31T12:38:15.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-31T13:14:13.000Z (almost 3 years ago)
- Last Synced: 2025-01-05T16:15:32.681Z (6 months ago)
- Language: TypeScript
- Size: 292 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@flexcodelabs/use-events-hooks) [](https://www.npmjs.com/package/@flexcodelabs/use-events-hooks)
[Package Name](#@flexcodelabs/use-events-hooks)
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)## Installation
`npm install @flexcodelabs/use-events-hooks`
or
`yarn add @flexcodelabs/use-events-hooks`
## Usage
```js
...
import { useEventListener, useWindowSize, useClickOutsideListener} from '@flexcodelabs/use-events-hooks';const Test = () => {
const buttonRef = useRef(null);// window size
const { width, height } = useWindowSize();// event listener
useEventListener("scroll", () => {
console.log("scrolled");
});// detect outside clicks
useClickOutsideListener(buttonRef, () => {
console.log("clicked outside");
});return (
viewport size: {width}x{height}
Text
);
};```
## Examples
[Source code](https://github.com/flexcodelabs/use-events-hooks)