https://github.com/thekashey/react-event-injector
💉React way to addEventListener
https://github.com/thekashey/react-event-injector
event-management optimization react
Last synced: about 1 year ago
JSON representation
💉React way to addEventListener
- Host: GitHub
- URL: https://github.com/thekashey/react-event-injector
- Owner: theKashey
- Created: 2018-10-15T10:04:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-18T09:49:45.000Z (over 7 years ago)
- Last Synced: 2025-04-03T15:47:05.712Z (over 1 year ago)
- Topics: event-management, optimization, react
- Language: TypeScript
- Homepage:
- Size: 348 KB
- Stars: 47
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
💉 React-Event-Injector
-----
Declarative React event manager, slim as 1kb.
Uses _standard_ addEventListener underneath, and able to overtake current [React API Limitations](https://github.com/facebook/react/issues/6436).
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.
```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';
It will inject onClick on me, please pass a SINGLE and HTML tag inside injector
```
- 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
```
### Children as RenderProp
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';
```
- You may use function as a target
```js
import {TargetedInjector} from 'react-event-injector';
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](https://github.com/oliviertassinari/react-event-listener).
- `PassiveListener` is quite similar to [default-passive-events](https://github.com/zzarcon/default-passive-events)
# Licence
MIT