How to use subscribe-ui-event - 10 common examples

componentDidMount() {
    const self = this;
    const reactI13n = self._getReactI13n();
    if (!reactI13n) {
      return;
    }

    // bind the click event for i13n component if it's enabled
    if (self.props.bindClickEvent) {
      self.clickEventListener = listen(ReactDOM.findDOMNode(self), 'click', clickHandler.bind(self));
    }

    const domNode = ReactDOM.findDOMNode(self);
    self._i13nNode.setDOMNode(domNode);

    // enable viewport checking if enabled
    if (reactI13n.isViewportEnabled()) {
      self._viewportDetector = new ViewportDetector(domNode, self._getViewportOptions(), () => {
        self._handleEnterViewport();
      });
      if (pageInitViewportDetected) {
        self._viewportDetector.init();
      } else {
        self._triggerPageInitViewportDetection();
      }
    }

ViewportDetector.prototype.init = function (skipInitDetection) {
  // detect viewport and execute handler if it's initially in the viewport
  if (!skipInitDetection) {
    this._detectViewport();
  }

  if (!this._enteredViewport) {
    this._subscribers = [subscribe('scrollEnd', this._detectViewport.bind(this), this._options)];
  }
};

TRANSFORM_PROP = M.prefixed('transform');
            }
        }

        // when mount, the scrollTop is not necessary on the top
        this.scrollTop = docBody.scrollTop + docEl.scrollTop;

        if (this.props.enabled) {
            this.setState({activated: true});
            this.updateInitialDimension();
            this.update();
        }
        // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
        this.subscribers = [
            subscribe('scrollStart', this.handleScrollStart.bind(this), {useRAF: true}),
            subscribe('scroll', this.handleScroll.bind(this), {useRAF: true, enableScrollInfo: true}),
            subscribe('resize', this.handleResize.bind(this), {enableResizeInfo: true})
        ];
    }

}
        }

        // when mount, the scrollTop is not necessary on the top
        this.scrollTop = docBody.scrollTop + docEl.scrollTop;

        if (this.props.enabled) {
            this.setState({activated: true});
            this.updateInitialDimension();
            this.update();
        }
        // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
        this.subscribers = [
            subscribe('scrollStart', this.handleScrollStart.bind(this), {useRAF: true}),
            subscribe('scroll', this.handleScroll.bind(this), {useRAF: true, enableScrollInfo: true}),
            subscribe('resize', this.handleResize.bind(this), {enableResizeInfo: true})
        ];
    }

canEnableTransforms = M.csstransforms3d;
                TRANSFORM_PROP = M.prefixed('transform');
            }
        }

        // when mount, the scrollTop is not necessary on the top
        this.scrollTop = docBody.scrollTop + docEl.scrollTop;

        if (this.props.enabled) {
            this.setState({activated: true});
            this.updateInitialDimension();
            this.update();
        }
        // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
        this.subscribers = [
            subscribe('scrollStart', this.handleScrollStart.bind(this), {useRAF: true}),
            subscribe('scroll', this.handleScroll.bind(this), {useRAF: true, enableScrollInfo: true}),
            subscribe('resize', this.handleResize.bind(this), {enableResizeInfo: true})
        ];
    }

constructor() {
    this._handleScroll = this._handleScroll.bind(this);
    this._handleResize = this._handleResize.bind(this);

    subscribe('scroll', this._handleScroll, {
      useRAF: true,
      enableScrollInfo: true,
    });

    subscribe('touchmove', this._handleScroll, {
      useRAF: true,
      enableScrollInfo: true,
    });

    subscribe('resize', this._handleResize, {
      useRAF: true,
      enableResizeInfo: true,
    });

    this._handleScroll(null, {
      scroll: {
        top: canUseDOM ? window.pageYOffset : 0,
      },
    });

    this._handleResize(null, {
      resize: {
        width: canUseDOM ? window.innerWidth : 0,
        height: canUseDOM ? window.innerHeight : 0,
      },
    });

subscribeViewportEvents: function (options) {
        this.subscription = subscribe('scrollEnd', this._detectViewport, options || {});
    },

subscribe(eventName, handler, options = {}) {
    return subscribe(eventName, handler, {
      useRAF: true,
      ...options,
    });
  }
}

constructor() {
    this._handleScroll = this._handleScroll.bind(this);
    this._handleResize = this._handleResize.bind(this);

    subscribe('scroll', this._handleScroll, {
      useRAF: true,
      enableScrollInfo: true,
    });

    subscribe('touchmove', this._handleScroll, {
      useRAF: true,
      enableScrollInfo: true,
    });

    subscribe('resize', this._handleResize, {
      useRAF: true,
      enableResizeInfo: true,
    });

    this._handleScroll(null, {
      scroll: {

componentDidMount() {
    this._scrollEvent = subscribe('scroll', this.handleScroll, {
      useRAF: true,
    });

    this._resizeEvent = subscribe('resize', this.handleResize, {
      useRAF: true,
      throttleRate: 300,
    });

    setInterval(() => {
      const rect = this.$root.getBoundingClientRect();
      const top = rect.top + viewport.pageY;
      const bottom = top + rect.height;

      this.height = rect.height;
      this.startPx = bottom - 0.5 * viewport.height;
      this.endPx = bottom;