How to use the @appbaseio/reactivemaps.AppbaseChannelManager function in @appbaseio/reactivemaps

value: function createChannel() {
			var _this3 = this;

			var executeChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

			// create a channel and listen the changes
			var channelObj = _reactivemaps.AppbaseChannelManager.create(this.context.appbaseRef, this.context.type, this.react, this.props.size, this.props.from, this.props.stream);
			this.channelId = channelObj.channelId;

			this.channelListener = channelObj.emitter.addListener(channelObj.channelId, function (res) {
				// implementation to prevent initialize query issue if old query response is late then the newer query
				// then we will consider the response of new query and prevent to apply changes for old query response.
				// if queryStartTime of channel response is greater than the previous one only then apply changes
				if (res.error && res.startTime > _this3.queryStartTime) {
					_this3.setState({
						queryStart: false,
						showPlaceholder: false
					});
				}
				if (res.appliedQuery) {
					if (res.mode === "historic" && res.startTime > _this3.queryStartTime) {
						var visibleNoResults = res.appliedQuery && res.data && !res.data.error ? !(res.data.hits && res.data.hits.total) : false;
						var resultStats = {

value: function createChannel() {
			var _this5 = this;

			this.includeAggQuery();
			// create a channel and listen the changes
			var channelObj = _reactivemaps.AppbaseChannelManager.create(this.context.appbaseRef, this.context.type, this.react);
			this.channelId = channelObj.channelId;
			this.channelListener = channelObj.emitter.addListener(this.channelId, function (res) {
				if (res.error) {
					_this5.setState({
						queryStart: false
					});
				}
				if (res.appliedQuery) {
					var data = res.data;
					var rawData = void 0;
					if (res.mode === "streaming") {
						rawData = _this5.state.rawData;
						rawData.hits.hits.push(res.data);
					} else if (res.mode === "historic") {
						rawData = data;
					}

value: function createChannel() {
			for (var level = 1; level < this.props.dataField.length; level += 1) {
				var react = this.getReact(level);
				// create a channel and listen the changes
				this.channelObj[level] = _reactivemaps.AppbaseChannelManager.create(this.context.appbaseRef, this.context.type, react);
				this.channelId[level] = this.channelObj[level].channelId;
				this.channelListener[level] = this.localChannel(level, react);
				// this.listenLoadingChannel(channelObj, "loadListenerParent");
			}
			this.setInitialData();
		}
	}, {

value: function componentWillUnmount() {
			if (this.channelId) {
				_reactivemaps.AppbaseChannelManager.stopStream(this.channelId);
			}
			if (this.channelListener) {
				this.channelListener.remove();
			}
			if (this.filterListener) {
				this.filterListener.remove();
			}
		}
	}, {

function start() {
				this.setState({
					isLoading: true
				});
				_reactivemaps.AppbaseChannelManager.nextPage(this.channelId);
			}

value: function componentWillReceiveProps(nextProps) {
			if (!_.isEqual(this.props, nextProps)) {
				this.setReact(nextProps);
				var size = null,
				    from = null;
				if (this.props.size !== nextProps.size || this.props.from != nextProps.from) {
					size = nextProps.size;
					from = nextProps.from;
				}
				_reactivemaps.AppbaseChannelManager.update(this.channelId, this.react, size, from, nextProps.stream);
			}
			if (nextProps.pagination !== this.pagination) {
				this.pagination = nextProps.pagination;
				this.setState({
					requestOnScroll: !nextProps.pagination
				});
			}
		}

value: function componentWillUnmount() {
			if (this.channelId) {
				_reactivemaps.AppbaseChannelManager.stopStream(this.channelId);
			}
			if (this.channelListener) {
				this.channelListener.remove();
			}
			if (this.loadListenerParent) {
				this.loadListenerParent.remove();
			}
			if (this.loadListenerChild) {
				this.loadListenerChild.remove();
			}
			if (this.filterListener) {
				this.filterListener.remove();
			}
		}
	}, {

function start() {
				this.setState({
					isLoading: true
				});
				_reactivemaps.AppbaseChannelManager.nextPage(this.channelId);
			}

value: function listenGlobal() {
			var _this2 = this;

			this.globalListener = _reactivemaps.AppbaseChannelManager.emitter.addListener("global", function (res) {
				if (res.react && Object.keys(res.react).indexOf(_this2.props.componentId) > -1) {
					var totalHits = res.channelResponse && res.channelResponse.data && res.channelResponse.data.hits ? res.channelResponse.data.hits.total : 0;
					var maxPageNumber = Math.ceil(totalHits / res.queryOptions.size) < 1 ? 1 : Math.ceil(totalHits / res.queryOptions.size);
					var size = res.queryOptions.size ? res.queryOptions.size : 20;
					var currentPage = Math.round(res.queryOptions.from / size) + 1;
					_this2.setState({
						totalHits: totalHits,
						size: size,
						maxPageNumber: maxPageNumber,
						currentValue: currentPage
					});
				}
			});
		}

value: function componentWillUnmount() {
			if (this.channelId) {
				_reactivemaps.AppbaseChannelManager.stopStream(this.channelId);
			}
			if (this.channelListener) {
				this.channelListener.remove();
			}
			if (this.loadListenerParent) {
				this.loadListenerParent.remove();
			}
			if (this.loadListenerChild) {
				this.loadListenerChild.remove();
			}
			if (this.filterListener) {
				this.filterListener.remove();
			}
		}
	}, {