Skip to main content

useEventListener

Importing useEventListener Hook​

import { useEventListener } from '@ciceksepeti/cui-hooks';

Example​

import React, { useRef, useState } from 'react';
import { useEventListener } from '@ciceksepeti/cui-hooks';

export const Example = () => {
  const [counter, setCounter] = useState(0);
  const clickRef = useRef(null);

  const clickHandler = () => {
    setCounter((prevState) => prevState + 1);
  };

  useEventListener({
    name: 'click',
    target: clickRef,
    listener: clickHandler,
  });

  return (
    <div>
      <button ref={clickRef}>click event</button>
      <p>{counter}</p>
    </div>
  );
};

export default EventListener;

Preview & Test​

PREVIEW & TEST AREA
useEventListener
  • Use buttons to see the magic

Counter: 0