{"library":"react-event-listener","title":"React Event Listener","description":"react-event-listener is a lightweight React component that offers a declarative way to manage global DOM event listeners, specifically targeting `window` and `document`. It leverages React's component lifecycle to automatically bind and unbind events, preventing common memory leaks and simplifying event management for global scopes. The current stable version is `0.6.7`, and releases are infrequent, primarily focused on maintenance and compatibility updates rather than new features, indicating a mature and stable library. A key differentiator is its `withOptions` utility, allowing developers to configure standard `addEventListener` options like `passive` and `capture` declaratively. It aims to solve the problem of imperatively adding and removing global event listeners by integrating them seamlessly into the React component tree.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-event-listener"],"cli":null},"imports":["import EventListener from 'react-event-listener';","import { withOptions } from 'react-event-listener';","import EventListener from 'react-event-listener';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport EventListener, { withOptions } from 'react-event-listener';\nimport ReactDOM from 'react-dom';\n\nclass MyComponent extends Component {\n  handleResize = () => {\n    console.log('Window resized!');\n  };\n\n  handleScroll = () => {\n    // This will only log if scroll is detected due to passive: true\n    console.log('Window scrolled (passive)!');\n  };\n\n  handleKeyDown = (event) => {\n    if (event.key === 'Escape') {\n      console.log('Escape key pressed on document (capture)!');\n    }\n  };\n\n  render() {\n    return (\n      <div>\n        <h1>Global Event Listener Example</h1>\n        <p>Open your console and try resizing the window, scrolling, or pressing 'Escape'.</p>\n        <div style={{ height: '200vh', background: 'lightgray', padding: '20px' }}>\n          Scrollable content to trigger window scroll.\n          <p>This div ensures the page is tall enough to scroll.</p>\n        </div>\n        <EventListener\n          target=\"window\"\n          onResize={this.handleResize}\n          onScroll={withOptions(this.handleScroll, { passive: true, capture: false })}\n        />\n        <EventListener target={document} onKeyDownCapture={this.handleKeyDown} />\n      </div>\n    );\n  }\n}\n\n// Assuming a root element with id 'root' exists in your HTML\nReactDOM.render(<MyComponent />, document.getElementById('root'));\n","lang":"javascript","description":"This example demonstrates how to use EventListener to bind to global 'window' resize and scroll events, and 'document' keydown events, including the use of `withOptions` for event configuration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}