useEventListener()

The useEventListener() hook lets you quickly add an event to a certain ref or the app's window if no ref is specified

Import

import { useEventListener } from 'react-haiku';

Usage

Window Event Triggered 0 Times!Ref Event Triggered 0 Times!

import { useState, useRef } from 'react'
import { useEventListener } from "react-haiku"

export const Component = () => {
    const [countWindow, setCountWindow] = useState(0);
    const [countRef, setCountRef] = useState(0);

    // Button Ref
    const buttonRef = useRef(null)

    // Event Handlers
    const countW = () => setCountWindow(countWindow + 1);
    const countR = () => setCountRef(countRef + 1);

    // Example 1: Window Event
    useEventListener('scroll', countW);

    // Example 2: Element Event
    useEventListener('click', countR, buttonRef);

    return (
        <>
            <b>Window Event Triggered {countWindow} Times!</b>
            <b>Ref Event Triggered {countRef} Times!</b>
            <button ref={buttonRef}>Click Me</button>
        </>
    );
}

API

This hook accepts the following arguments:

• eventName - the event string value that you want to set to your ref/window
• handler - the handler function for your event
• element - the ref you can provide for targetting elements for your event