react-document-events
Declarative method for binding handlers to document and window - and cleaning them up.
Usage
Given an imaginary component that listens to the 'esc' key, but only if its parent tells it to:
;; Component { if ekeyCode === 27 /* esc */ this; }; { var target = processbrowser ? document : null; return <div> <div>Component Innards</div> <DocumentEvents enabled=thispropslistenToKeys onKeyUp=thisonKeyUp passive=false capture=false /> </div> ; }
Props
- capture (
boolean=false
): If true, will add listeners in thecapture
phase. - enabled (
boolean=true
): If true, will attach handlers, if false, will remove them. Safe to add/remove at will. - passive (
boolean=false
): If true, will add listeners with the passive option, if supported. A feature test is performed to ensure this does not accidentally setuseCapture
. - target (
(HTMLElement | () => HTMLElement | () => void | void)=document
): The element to attach listeners to. May also be a function returning said element. If void, or returning void, this element will noop.- To be safe when server rendering, the default is
document
, but only ifprocess.browser
returns true.
- To be safe when server rendering, the default is
- on[eventName] (
EventHandler
): Any valid event handler name. Note these events are attached directly, so you will receive browser events, not React'sSyntheticEvent
, although the semantics are mostly the same.