Declarative method for binding handlers to document and window - and cleaning them up.
MIT License
Declarative method for binding handlers to document and window - and cleaning them up.
Given an imaginary component that listens to the 'esc' key, but only if its parent tells it to:
import React from 'react';
import DocumentEvents from 'react-document-events';
class SideEffectingComponent extends React.Component {
onKeyUp = (e) => {
if (e.keyCode === 27 /* esc */) this.toggleSomethingOnEsc(e);
};
render() {
var target = process.browser ? document : null;
return (
<div>
<div>Component Innards</div>
<DocumentEvents enabled={this.props.listenToKeys} onKeyUp={this.onKeyUp} passive={false} capture={false} />
</div>
);
}
}
boolean=false
): If true, will add listeners in the capture
phase.boolean=true
): If true, will attach handlers, if false, will remove them. Safe to add/remove at will.boolean=false
): If true, will add listeners with theuseCapture
.(HTMLElement | () => HTMLElement | () => void | void)=document
): The element to attach listeners to.document
, but only if process.browser
returns true.EventHandler
): Any valid event handler name.SyntheticEvent
, although the semantics are mostly the same.