Miss any of our Open RFC calls?Watch the recordings here! »

@semantic-ui-react/event-stack

3.1.1 • Public • Published

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.

Keywords

none

Install

npm i @semantic-ui-react/event-stack

DownloadsWeekly Downloads

134,339

Version

3.1.1

License

MIT

Unpacked Size

93.8 kB

Total Files

32

Last publish

Collaborators

  • avatar
  • avatar