Source: https://primereact.org/hooks/useeventlistener/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
HOOK
API

useEventListener

Manages event bindings of an element programmatically.

Import#

import { useEventListener } from 'primereact/hooks';

Copy

Document#

Events are attached to the document itself by default.

Press a Key

const [bindKeyDown, unbindKeyDown] = useEventListener({
    type: 'keydown',
    listener: (e) => {
        onKeyDown(e);
    }
});

const [bindKeyUp, unbindKeyUp] = useEventListener({
    type: 'keyup',
    listener: (e) => {
        setPressed(false);
    }
});

Copy

Element#

The element to bind and unbind the events is defined with the target option.

Hover Me

const [hover, setHover] = useState(false);
const elementRef = useRef(null);

const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
    target: elementRef,
    type: 'mouseenter',
    listener: () => {
        setHover(true);
    }
});

const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
    target: elementRef,
    type: 'mouseleave',
    listener: () => {
        setHover(false);
    }
});

Copy

Import
Document
Element

PrimeReact 10.9.7 by PrimeTek