useEventListener

Package

Share - Core

Category

Browser

Description

use EventListener with ease

Use EventListener with ease. Register using addEventListener on mounted, and removeEventListener automatically on unmounted.

Usage

import { useEventListener } from '@hungpvq/shared-core';

useEventListener(document, 'visibilitychange', (evt) => {
  console.log(evt);
});

You can also pass a ref as the event target, useEventListener will unregister the previous event and register the new one when you change the target.

import { useEventListener } from '@hungpvq/shared-core';

const element = ref<HTMLDivElement>();
useEventListener(element, 'keydown', (e) => {
  console.log(e.key);
});

<template>
  <div v-if="cond" ref="element">Div1</div>
  <div v-else ref="element">Div2</div>
</template>

You can also call the returned to unregister the listener.

import { useEventListener } from '@hungpvq/shared-core';

const cleanup = useEventListener(document, 'keydown', (e) => {
  console.log(e.key);
});

cleanup(); // This will unregister the listener.

Note if your components also run in SSR (Server Side Rendering), you might get errors (like document is not defined) because DOM APIs like document and window are not available in Node.js. To avoid that you can put the logic inside onMounted hook.

// onMounted will only be called in the client side, so it guarantees the DOM APIs are available.
onMounted(() => {
  useEventListener(document, 'keydown', (e) => {
    console.log(e.key);
  });
});