@semantic-ui-react/event-stack

WebJar for @semantic-ui-react/event-stack

License

License

MIT
Categories

Categories

Ant Build Tools React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

semantic-ui-react__event-stack
Last Version

Last Version

3.1.0
Release Date

Release Date

Type

Type

jar
Description

Description

@semantic-ui-react/event-stack
WebJar for @semantic-ui-react/event-stack
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/layershifter/event-stack

Download semantic-ui-react__event-stack

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/semantic-ui-react__event-stack/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>semantic-ui-react__event-stack</artifactId>
    <version>3.1.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/semantic-ui-react__event-stack/
implementation 'org.webjars.npm:semantic-ui-react__event-stack:3.1.0'
// https://jarcasting.com/artifacts/org.webjars.npm/semantic-ui-react__event-stack/
implementation ("org.webjars.npm:semantic-ui-react__event-stack:3.1.0")
'org.webjars.npm:semantic-ui-react__event-stack:jar:3.1.0'
<dependency org="org.webjars.npm" name="semantic-ui-react__event-stack" rev="3.1.0">
  <artifact name="semantic-ui-react__event-stack" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='semantic-ui-react__event-stack', version='3.1.0')
)
libraryDependencies += "org.webjars.npm" % "semantic-ui-react__event-stack" % "3.1.0"
[org.webjars.npm/semantic-ui-react__event-stack "3.1.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : exenv jar [1.2.2,2)
org.webjars.npm : prop-types jar [15.6.2,16)

Project Modules

There are no modules declared in this project.

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

npm Circle CI AppVeyor CI Codecov David

A React component for binding events on the global scope.

Installation

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

import React, { Component } from 'react'
import EventStack from '@semantic-ui-react/event-stack'

class MyComponent extends Component {
  handleResize = () => {
    console.log('resize')
  }

  render() {
    return (
      <div>
        <EventStack name="resize" on={this.handleResize} target="window" />
      </div>
    )
  }
}
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, 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.

Versions

Version
3.1.0
3.0.1