# react-event-injector

> React way to addEventListener

Latest version **1.1.2** (published 2018-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-event-injector
pnpm add react-event-injector
yarn add react-event-injector
bun add react-event-injector
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2018-10-17 |
| First published | 2018-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.5.0 |
| Dependencies | 2 |
| Unpacked size | 236.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anton Korzunov |
| Maintainers | kashey |
| Keywords | react, event, passive, manager, observer, event listener |

## Links

- npm: https://www.npmjs.com/package/react-event-injector
- Homepage: https://github.com/theKashey/react-event-injector#readme
- npm.io page: https://npm.io/package/react-event-injector

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.0.1

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.1.2 (latest) — 2018-10-17
- 1.1.1 — 2018-10-16
- 1.1.0 — 2018-10-16
- 1.0.0 — 2018-10-15

## README

<div align="center">
  <h1>💉 React-Event-Injector‍</h1>
  <br/>
  <a href="https://secure.travis-ci.org/theKashey/react-event-injector">
     <img src="https://secure.travis-ci.org/theKashey/react-event-injector.svg" alt="Build status">
  </a>
  
  <a href="https://www.npmjs.com/package/react-event-injector">
   <img src="https://img.shields.io/npm/v/react-event-injector.svg?style=flat-square" />
  </a>
  
  <br/>  
</div>  

-----
Declarative React event manager, slim as 1kb. 
Uses _standard_ addEventListener underneath, and able to overpass 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';
<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
```js
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.
```js
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 use `forwardRef` to forward ref to the proper target.
```js
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:
```js
import {TargetedInjector} from 'react-event-injector';
<TargetedInjector 
onClick={event}
target={this.ref}
>  
``` 
- You may use function as a target
```js
import {TargetedInjector} from 'react-event-injector';
<TargetedInjector 
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](https://github.com/oliviertassinari/react-event-listener).
- `PassiveListener` is quite similar to [default-passive-events](https://github.com/zzarcon/default-passive-events)

# Licence
MIT

---
_Source: https://npm.io/package/react-event-injector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._