---

Declarative React event manager, slim as 1kb. Uses standard addEventListener underneath, and able to overtake current React API Limitations.

Please - don't overuse this library, as long "React" way to attach events is far more performant, and better working with React itself.

API

There is 3 Components, exported from this package

• EventInjector - to inject events somewhere down the tree
• PassiveListener - to inject "passive" events, which could be quite useful to make application run smoothly.
• ActiveListener - to inject non "passive" events, as long some events are passive by default.
• TargetedInjector - to inject events to the specific target.

All components will add events on mount, remove on unmount, and update changed on update if pure is not set.

Why

• 😀 to inject passive events. There is no way to inject them in "react-way".
• 😀 to inject events where you need, without relaying on bubbling or capturing or some react details.
• ☹️ to get native DOM event, not React.Synthetic.
• ☹️ to work with DOM Tree, not React.Tree.

Injection API

Children as React Element

• You may provide a single tag, as a children, or use forwardRef to forward ref to the proper target.

1import {EventInjector} from 'react-event-injector';
2<EventInjector onClick={event}>
3 <div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
4</EventInjector> 

• Capture events are also supported

1import {EventInjector} from 'react-event-injector';
2<EventInjector
3        onClick={event}
4        // capture events are also supported
5        onKeydownCapture={event}
6        // explicity set passive:false to all events. Better set to true
7        settings={{passive:false}}
8>
9 <div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
10</EventInjector> 

• You may nest Injectors one inside another. Injectors is the only way to combine, passive, active, and neutral event listeners.

All injectors implements EventTarget interface, and could be ref-ed by another injectors.

1import {PassiveListener, EventInjector} from 'react-event-injector';
2<PassiveListener onScroll={event}>
3 <EventInjector onClick={event}>
4  <EventInjector onKeydownCapture={event}>
5   <div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
6  </EventInjector>
7 </EventInjector>
8</PassiveListener>

Children as RenderProp

You may provide a single tag, as a children, or use forwardRef to forward ref to the proper target.

1import {EventInjector} from 'react-event-injector';
2<EventInjector onClick={event}>
3 { setRef => (
4         <div ref={setRef}>
5          It will inject onClick on me</div>
6 }
7</EventInjector> 

EventInjector, ActiveListener and PassiveListener has the same API, and accept only children and any on-event, or on-event-Capture, as any HTML tag does. The difference is default value for settings.

TargetedInjector

• Inject events to any target provided:

1import {TargetedInjector} from 'react-event-injector';
2<TargetedInjector
3        onClick={event}
4        target={this.ref}
5>  

• You may use function as a target

1import {TargetedInjector} from 'react-event-injector';
2<TargetedInjector
3        onClick={event}
4        target={() => document.querySelector('#element-i-need')}
5>  

In the case of a function, target would be executed twice - on componentDidMount, and right after it, thus it will be able to inject events to sibling elements, not existing on mount.

Inspiration

• TargetedInjector is quite similar to react-event-listener.
• PassiveListener is quite similar to default-passive-events

Licence

MIT