Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/layershifter/event-stack
[DEPRECATED] A React component for binding events on the global scope
https://github.com/layershifter/event-stack
Last synced: about 13 hours ago
JSON representation
[DEPRECATED] A React component for binding events on the global scope
- Host: GitHub
- URL: https://github.com/layershifter/event-stack
- Owner: layershifter
- License: mit
- Created: 2018-09-06T09:15:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-28T01:41:35.000Z (10 months ago)
- Last Synced: 2024-10-02T17:37:07.405Z (about 23 hours ago)
- Language: TypeScript
- Homepage:
- Size: 1.33 MB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Deprecated
Issues mentioned in `README` should be solved by other approaches:
- `.addEventListener()` is blazing fast and is not a real performance issue
- to solve issues with ordering in case when regular DOM event propogation is not available consider to use things like https://github.com/palmerhq/react-register-nodes.
Please avoid usages of this library.
---
Event Stack
> A React component for binding events on the global scope.
## Installation
```bash
yarn add @semantic-ui-react/event-stack
# or
npm install @semantic-ui-react/event-stack
```
## Why?
The `EventStack` solves two design problems:
1. Reduces the number of connected listeners to DOM nodes compared to `element.addListener()`.
2. Respects event ordering. Example, two modals are open and you only want the top modal to close on document click.
## Usage
```jsx
import React, { Component } from 'react'
import EventStack from '@semantic-ui-react/event-stack'
class MyComponent extends Component {
handleResize = () => {
console.log('resize')
}
render() {
return (
)
}
}
```
##### Note on server-side rendering
When doing server side rendering, document and window aren't available. You can use a string as a `target`, or check that they exist before rendering the component with [`exenv`](https://github.com/JedWatson/exenv), for example.
##### Note on performance
You should avoid passing inline functions for listeners, because this creates a new Function instance on every render, defeating `EventListener`'s `shouldComponentUpdate`, and triggering an update cycle where it removes its old listeners and adds its new listeners (so that it can stay up-to-date with the props you passed in).
## Implementation details
The `EventStack` is a public API that allows subscribing a DOM node to events. The event subscription for
each unique DOM node creates a new `EventTarget` object.
```
+------------+ +-------------+
| | 0..* | |
| EventStack | +------> | EventTarget |
| | | |
+------------+ +-------------+
```
## EventTarget
Each `EventTarget` is assigned to an unique DOM node. An `EventTarget` tracks event handlers for
the target's DOM node. Making multiple subscriptions to a `click` event for a single DOM node will
result in a single registered `handler` for that DOM node. An `EventPool` also handles `EventPool`
relations, it stores only unique pools.
```
+-------------+ +---------+
| | 0..* | |
| EventTarget | +------> | handler |
| | | |
+-------------+ +---------+
+ +-----------+
| 0..* | |
+----------------> | EventPool |
| |
+-----------+
```
A `handler` is a generated function that will notify the corresponding subscribed `EventPool`.
## EventPool & EventSet
An `EventPool` notifies its `EventSet`, while an `EventSet` stores a set of subscribed
event handlers. An `EventSet` is also responsible for event ordering and dispatching to
subscribed handlers.
```
+-----------+ +----------+
| | 1 | |
| EventPool | +---> | EventSet |
| | | |
+-----------+ +----------+
```
#### Credits
The idea of a React component is taken from [`react-event-listener`](https://www.npmjs.com/package/react-event-listener).