use-dom-event

v0.1.3

Published

4 years ago

A React Hook for DOM Events. Written in Typescript. Also perfectly usable in Javascript.

0High
0Medium
0Low

asadhazara

DOM Events React Hooks React React use-dom-event

Table of content

Please let me know, if I forgot something below.

Installation

To get started just enter de following command and you're good to go.

npm install --save use-dom-event

Usage

You can use this React Hook with Window Object or any other HTML DOM Object. This Hooks works very similarly to useEffect Hook. When no dependecies provided, the event will be removed after the components unmounts. Otherwise the event will be removed and added again from the target object, whenever one of the dependencies provided change. The hook uses addEventlistener and removeEventlistener under the hood.

Window Object

import useDOMEvent from 'use-dom-event';

function MyComponent() {
  useDOMEvent(
    {
      target: Window,
      type: 'resize',
      // the event param here is automatically typed as UIEvent
      listener: function(event) {
        // console.log(window.innerWidth)
      },
    },
    [], // optional array of dependencies just like useEffect Hook
  );

  return <div>MyComponent</div>;
}

DOM Document Object

import useDOMEvent from 'use-dom-event';

function MyComponent() {
  useDOMEvent(
    {
      target: document,
      type: 'click',
      // the event param here is automatically typed as MouseEvent
      listener: function(event) {
        // console.log(event.target)
      },
    },
    [], // optional array of dependencies just like useEffect Hook
  );

  return <div>MyComponent</div>;
}

DOM Element Object

import useDOMEvent from 'use-dom-event';

function MyComponent() {
  useDOMEvent(
    {
      target: document.body,
      type: 'mouseenter',
      // the event param here is automatically typed as MouseEvent
      listener: function(event) {
        // console.log(event.target)
      },
    },
    [], // optional array of dependencies just like useEffect Hook
  );

  return <div>MyComponent</div>;
}

DOM Element Object within React RefObject

When using dangerouslySetInnerHTML, you cannot set eventListeners using JSX. In that case you may want to use React RecObject to add event listeners to a particular element.

import { useRef } from 'react';
import useDOMEvent from 'use-dom-event';

function MyComponent() {
  const RefElement = useRef(null);

  useDOMEvent(
    {
      // when using the hook in a typescript project you may get an error
      // telling you `RefElement.current` is `undefined`. In that case just
      // define the target it as following:
      // `(RefElement.current as HTMLDivElement).querySelector('button')`
      target: RefElement.current.querySelector('button'),
      type: 'mouseenter',
      // the event param here is automatically typed as MouseEvent
      listener: function(event) {
        // console.log(event.target)
      },
    },
    [], // optional array of dependencies just like useEffect Hook
  );

  return <div ref={RefElement} dangerouslySetInnerHTML={{ __html: '<button>Inner Button</button>' }} />;
}

API Reference

type Options = {
  target: Window | Document | HTMLElement | Element;
  type: string;
  listener: EventListenerOrEventListenerObject;
  options?: boolean | AddEventListenerOptions;
}

useDOMEvent(options: Options, deps?: React.DependencyList);

Contribute

If you see any improvement to make, feel free to open a Pull Request.

License

MIT license