Socket
Socket
Sign inDemoInstall

react-use-listener

Package Overview
Dependencies
3
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-use-listener

attach native event without and don't care about bind / unbind


Version published
Maintainers
1
Weekly downloads
253
decreased by-41.84%

Weekly downloads

Readme

Source

useListener

attach native event without and don't care about bind / unbind

Demo CodeSandbox

Usage

  1. bind resize event
import {useState} from "react";
function App() {
    const [width, setWidth] = useState(0)
    useListener(window, "resize", () => {
        setWidth(window.innerWidth);
    });
    return (
        <div>Width: {width}</div>
    )
}
  1. cancel binding
import {useState} from "react";
function App() {
    const [width, setWidth] = useState(0)
    const listener = useListener(window, "resize", () => {
        setWidth(window.innerWidth);
        if (window.innerWidth < 1000) {
            listener();
        }
    });
    return (
        <div>Width: {width}</div>
    )
}
  1. conditionally bind event
import {useState} from "react";
function App() {
    const [enabled, setEnabled] = useState(false);
    const [width, setWidth] = useState(0)
    useListener(window, "resize", () => {
        setWidth(window.innerWidth);
    }, {
        enabled
    });
    return (
        <div>
            <div>Width: {width}</div>
            <button onClick={() => setEnabled(!enabled)}>Bind resize</button>
        </div>
    )
}
  1. debounce
import {useState, useRef} from "react";
function App() {
    const ref = useRef();
    useListener(ref, "keyup", (e) => {
        // set width after 300 milliseconds when stopped resizing
        console.log(e.target.value);
    }, {
        debounce: 300
    });
    return (
        <div>
            <input ref={ref} />
        </div>
    )
}
  1. throttle
import {useState} from "react";
function App() {
    const [width, setWidth] = useState(0)
    useListener(window, "resize", () => {
        // trigger after 300 milliseconds
        setWidth(window.innerWidth);
    }, {
        throttle: 300
    });
    return (
        <div>
            <div>Width: {width}</div>
        </div>
    )
}

Reference

   const listener = useListener(element, event, callback, option);
  • element : Element | Document | Window | ref element to attache event

  • event : string event name to bind

  • callback : (e) => void callback

  • option:

    • enabled : boolean weather to listen or not, default true
    • throttle : number to throttle event, default undefined
    • debounce : number debounce event, default undefined
    • capture : boolean native flag
    • passive : boolean native flag
    • once : boolean native flag

Keywords

FAQs

Last updated on 25 Jun 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc