README
use-dom-event
A React Hook for DOM Events. Written in Typescript. Also perfectly usable in Javascript.
Brought to you by Zorrilla
.
npm install --save 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
- Copyright (c) 2020 Asad Hazara.