@flexcodelabs/use-events-hooks

Package Name

• Installation
• Usage
• Examples

Installation

npm install @flexcodelabs/use-events-hooks

or

yarn add @flexcodelabs/use-events-hooks

Usage

...
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 (
    <div>
      viewport size: {width}x{height}
      <button ref={buttonRef}>Text</button>
    </div>
  );
};

Examples

Source code