useEventListenerRef

import { useState } from "react";
import { useEventListenerRef } from "rooks";
import "./styles.css";
 
export default function App() {
  const [value, setValue] = useState(0);
  const ref = useEventListenerRef("click", function() {
    setValue(value + 1);
  });
  return (
    <div
      ref={ref}
      className="App"
      style={{
        padding: "20px",
        border: "5px solid dodgerblue",
      }}
    >
      <h2>Click in this box</h2>
      <p> Value is {value}</p>
    </div>
  );
}