Do not work, If we pass element as ref

[prathameshmhatre]

If we pass element ref as below

const counterEl = useRef(null);

useEventListener('click', () => alert('Ref click'), counterEl);

  return (
    <div className="App">
      Count: <span ref={counterEl}>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );

But, It will work If we pass elementRef.current as below
useEventListener('click', () => alert('Ref click'), counterEl.current);

Will suggest a change, and If you allow will create a PR with the following change

    const targetIsRef = element.hasOwnProperty('current');
    const currentTarget = targetIsRef ? element.current : element;
    const isSupported = currentTarget && currentTarget.addEventListener;

[srmagura]

I prefer the current design but let's see what others say.

[prathameshmhatre]

Any update guys?

[donavon]

I like this. It adds support without breaking existing code. PRs welcome.

[donavon]

after some thought, what exactly is your use case and why can't you solve this with built-in React onClick (or other) handers?

[jarnaiz]

Hello,
I have the exact same issue, I am using a third party library https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/ and this component does not expose the onClick event.

Thanks!

[prathameshmhatre]

Team, I have the code ready but the test case is giving 90%. Can someone help me. I have attached the test result. Please find the below code that I have added

    let targetIsRef = false;
    if (element) {
      targetIsRef = Object.prototype.hasOwnProperty.call(element, 'current');
    }
    const currentTarget = targetIsRef ? element.current : element;
    const isSupported = currentTarget && currentTarget.addEventListener;
    if (!isSupported) {
      return;
    }

[donavon]

@prathameshmhatre @jarnaiz

I was in the middle of a rewrite in TypeScript anyway, so I went ahead and added ref support. See #36

Plz try it out (published tp npm as @use-it/[email protected]) and let me know if this works for you.

[iamaamir]

@prathameshmhatre @jarnaiz

I was in the middle of a rewrite in TypeScript anyway, so I went ahead and added ref support. See #36

Plz try it out (published tp npm as @use-it/[email protected]) and let me know if this works for you.

check #40

[FoxxMD]

Any progress on this?