💉 React-Event-Injector
<img src="https://secure.travis-ci.org/theKashey/react-event-injector.svg" alt="Build status">
<img src="https://img.shields.io/npm/v/react-event-injector.svg?style=flat-square" />
----- 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 packageEventInjector
- to inject events somewhere down the treePassiveListener
- 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.
import {EventInjector} from 'react-event-injector';
<EventInjector onClick={event}>
<div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
</EventInjector>
- Capture events are also supported
import {EventInjector} from 'react-event-injector';
<EventInjector
onClick={event}
// capture events are also supported
onKeydownCapture={event}
// explicity set passive:false to all events. Better set to true
settings={{passive:false}}
>
<div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
</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.
import {PassiveListener, EventInjector} from 'react-event-injector';
<PassiveListener onScroll={event}>
<EventInjector onClick={event}>
<EventInjector onKeydownCapture={event}>
<div>It will inject onClick on me, please pass a SINGLE and HTML tag inside injector</div>
</EventInjector>
</EventInjector>
</PassiveListener>
Children as RenderProp
You may provide a single tag, as a children, or useforwardRef
to forward ref to the proper target.
import {EventInjector} from 'react-event-injector';
<EventInjector onClick={event}>
{ setRef => (
<div ref={setRef}>
It will inject onClick on me</div>
}
</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:
```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