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 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.
;<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
;<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
, andneutral
event listeners.
All injectors implements EventTarget interface, and could be
ref
-ed by another injectors.
;<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 use forwardRef
to forward ref to the proper target.
;<EventInjector onClick=event> <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:
;<TargetedInjector onClick=eventtarget=thisref>
- You may use function as a target
;<TargetedInjector onClick=eventtarget= document>
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