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

        
[![npm](https://img.shields.io/npm/v/@flexcodelabs/use-events-hooks)](https://www.npmjs.com/package/@flexcodelabs/use-events-hooks) [![NPM](https://img.shields.io/npm/l/@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)