question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Do not work, If we pass element as ref

See original GitHub issue

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;

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
FoxxMDcommented, Apr 15, 2021

Any progress on this?

1reaction
iamaamircommented, Mar 9, 2021

@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/event-listener@1.0.0-beta.3) and let me know if this works for you.

check #40

Read more comments on GitHub >

github_iconTop Results From Across the Web

Are you allowed to assign an element a ref if the parent ...
I am working on existing code (ReusableComponent) so changing all instances of ReusableComponent to pass a ref is not viable.
Read more >
Refs and the DOM - React
Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
Read more >
A complete guide to React refs - LogRocket Blog
Learn how to use React refs, and why it's important to use them only when React can't handle a function call through its...
Read more >
Everything You Need to Know About Refs in React
New and experienced developers alike seem to have trouble with the Refs API. Learn why, how, and when to use Refs in your...
Read more >
Avoiding useEffect with callback refs - TkDodo's blog
Luckily, React uses referential stability to check if the callback ref should be run or not. That means if we pass the same...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found