How to use element-resize-event - 10 common examples

To help you get started, we’ve selected a few element-resize-event examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sshwsfc / xadmin / xadmin-dashboard / src / widgets / WebGL.js View on Github external
componentDidMount() {
    let onEvents = this.props.onEvents || {}
    this.renderGLDom(glObj => glObj.resize())

    //this.bindEvents(glObj, onEvents)

    // on resize
    elementResizeEvent(this.refs.webglDom, () => {
      this.renderGLDom(glObj => glObj.resize())
    })
  }
github react-page / react-page / packages / core / src / components / Dimensions / index.tsx View on Github external
public componentDidMount() {
      if (!this.containerRef) {
        throw new Error('Cannot find container div');
      }

      this.updateDimensions();
      if (elementResize) {
        // Experimental: `element-resize-event` fires when an element resizes.
        // It attaches its own window resize listener and also uses
        // requestAnimationFrame, so we can just call `this.updateDimensions`.
        onElementResize(this.containerRef, this.updateDimensions);
      } else {
        this.getWindow().addEventListener('resize', this.onResize, false);
      }
    }
github AlpacaTravel / react-map-gl-alt / src / map.jsx View on Github external
componentWillUnmount() {
    // Remove in event listeners for the container
    // Pending; https://github.com/KyleAMathews/element-resize-event/issues/2
    if (removeResizeListener) {
      removeResizeListener(this.container, this._resizedContainer);
    }

    // Remove the map instance through the API
    if (this._map) {
      this._map.remove();
      this._map = null;
    }
  }
github AlpacaTravel / react-map-gl-alt / src / map.jsx View on Github external
// If we have a next viewport action
    if (updateMapViewport) {
      this._updateMapViewport({}, updateMapViewport);
    }

    // Initial actions
    this._updateConvenienceHandlers({}, this.props);
    this._updateMapOptions({}, this.props);
    this._updateFeatureState({}, this.props);

    // Listen to some of the dispatched events
    this._listenStateEvents();

    // Add in event listeners for the container
    elementResizedEvent(this.container, this._resizedContainer);
  }
github elijahmanor / egghead-course-react-hooks / 12-convert-a-render-props-using-a-custom-react-hook / react-hooks / src / TodoItem.js View on Github external
componentDidMount() {
    const element = this.wrapperRef.current;
    this.updateSize();
    elementResizeEvent(element, this.updateSize);
  }
  componentWillUnmount() {
github tomat / react-auto-scale / src / components / AutoScale.js View on Github external
componentDidMount() {
    const { wrapper, content } = this.refs;
    const actualContent = content.children[0];

    this.updateState({
      ...this.state,
      contentSize: { width: actualContent.offsetWidth, height: actualContent.offsetHeight },
      wrapperSize: { width: wrapper.offsetWidth, height: wrapper.offsetHeight },
    });

    ere(actualContent, () => {
      this.updateState({
        ...this.state,
        contentSize: { width: actualContent.offsetWidth, height: actualContent.offsetHeight },
      });
    });

    ere(wrapper, () => {
      this.updateState({
        ...this.state,
        wrapperSize: { width: wrapper.offsetWidth, height: wrapper.offsetHeight },
      });
    });
  }
github hunnble / QandAs / client / components / Chart.jsx View on Github external
componentDidMount() {
    let chartObj = this.renderEChart();
    for (let event in this.props.bindEvents) {
      if (typeof event === 'string' && typeof bindEvents[event] === 'function') {
        chartObj.on(event, (params) => {
          bindEvents[event](params, chartObj);
        });
      }
    }
    elementResizeEvent(this.refs.chart, () => {
      chartObj.resize();
    });
  }
  componentDidUpdate() {
github o2xp / react-datatable / src / components / DatatableInitializer.js View on Github external
initializeCustomComponents({
      customProps,
      CustomTableBodyCell,
      CustomTableBodyRow,
      CustomTableHeaderCell,
      CustomTableHeaderRow,
      customDataTypes
    });

    initText(text);
    updateComponentSize();

    const callBack = () => throttle(() => updateComponentSize(), 100);
    const element = document.getElementById("o2xp").parentElement;

    elementResizeEvent(element, callBack());
  }
github planttheidea / react-vidz-player / src / index.js View on Github external
componentDidMount() {
    this.setVidzInstance();

    elementResize(this.refs.container, this.debounceSetPlayerDimensions);

    document.addEventListener(fullscreenchange, this.onFullscreenChange);
    window.addEventListener('resize', this.debounceSetPlayerDimensionsOnResize);
  }
github elijahmanor / egghead-course-react-hooks / 12-convert-a-render-props-using-a-custom-react-hook / react-hooks / src / TodoExample / TodoItem3.js View on Github external
useEffect(() => {
    const updateSize = () => {
      const element = wrapperRef.current;
      setSize({ height: element.clientHeight, width: element.clientWidth });
    };
    const element = wrapperRef.current;
    updateSize();
    elementResizeEvent(element, updateSize);
    return () => elementResizeEvent.unbind(wrapperRef.current);
  }, []);
  return [size, wrapperRef];

element-resize-event

Polyfill to make it easy to listen for element resize events

MIT
Latest version published 3 years ago

Package Health Score

57 / 100
Full package analysis