-----
Declarative React event manager, slim as 1kb.
Uses _standard_ addEventListener underneath, and able to overpass 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

$3

- You may provide a single __tag__, as a children, or use forwardRef to forward ref to the proper target.
``js
import {EventInjector} from 'react-event-injector';

It will inject onClick on me, please pass a SINGLE and HTML tag inside injector

`

- Capture events are also supported
`js
import {EventInjector} from 'react-event-injector';
onClick={event}
// capture events are also supported
onKeydownCapture={event}
// explicity set passive:false to all events. Better set to true
settings={{passive:false}}
>




`
- 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.
`js
import {PassiveListener, EventInjector} from 'react-event-injector';

It will inject onClick on me, please pass a SINGLE and HTML tag inside injector

`

$3

You may provide a single __tag__, as a children, or use forwardRef to forward ref to the proper target.
`js
import {EventInjector} from 'react-event-injector';

{ setRef => (

It will inject onClick on me

}

`

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:
`js
import {TargetedInjector} from 'react-event-injector';
onClick={event}
target={this.ref}
>
`
- You may use function as a target
`js
import {TargetedInjector} from 'react-event-injector';
onClick={event}
target={() => document.querySelector('#element-i-need')}
>
`
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