Skip to main content
Version: Next

useEventListenerRef

About​

A react hook to add an event listener to a ref

Installation​

npm install --save rooks

Importing the hook​

import { useEventListenerRef } from "rooks";

Usage​

function Demo() {
const ref = useEventListenerRef("click", function () {
console.log("clicked");
});
return <div ref={ref}>Click me</div>;
}

render(<Demo />);

Arguments​

ArgumentsTypeDescriptionDefault value
eventNamestringThe event to trackundefined
callbackFunctionThe callback to be called on event() => void
conditionsobjectThe options to be passed to the event listener{}
isLayoutEffectbooleanShould it use layout effect. Defaults to falsefalse

Return​

Return valueTypeDescription
refFunctionA callback ref that can be used as ref prop

Codesandbox Examples​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.