Zorrilla
.
npm install --save use-dom-event
Please let me know, if I forgot something below.
To get started just enter de following command and you're good to go.
npm install --save use-dom-event
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.
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>;
}
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>;
}
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>;
}
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>' }} />;
}
type Options = {
target: Window | Document | HTMLElement | Element;
type: string;
listener: EventListenerOrEventListenerObject;
options?: boolean | AddEventListenerOptions;
}
useDOMEvent(options: Options, deps?: React.DependencyList);
If you see any improvement to make, feel free to open a Pull Request.
- MIT license
- Copyright (c) 2020 Asad Hazara.