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

initResize: function initResize(dom) {
        var that = this;

        if (that.resizable) {
          that.insResize =
            that.insResize ||
            Resize({
              strategy: 'scroll', // <- For ultra performance.
            });
          that.fnResize =
            that.fnResize ||
            _throttle(that.resize, 250, {
              leading: true,
              trailing: true,
            });
          that.insResize.listenTo(dom, function(element) {
            var width = element.offsetWidth;
            var height = element.offsetHeight;
            that.fnResize({
              width: width,
              height: height,
              silent: false,
            });

const container = document.createElement('div')
    // Use to remember whick float container is shown.
    container.classList.add(this.name)
    container.classList.add('ag-float-container')
    floatBox.classList.add('ag-float-wrapper')

    if (showArrow) {
      const arrow = document.createElement('div')
      arrow.setAttribute('x-arrow', '')
      arrow.classList.add('ag-popper-arrow')
      floatBox.appendChild(arrow)
    }

    floatBox.appendChild(container)
    document.body.appendChild(floatBox)
    const erd = resezeDetector({
      strategy: 'scroll'
    })

    // use polyfill
    erd.listenTo(container, ele => {
      const { offsetWidth, offsetHeight } = ele
      Object.assign(floatBox.style, { width: `${offsetWidth}px`, height: `${offsetHeight}px` })
      this.popper && this.popper.update()
    })

    // const ro = new ResizeObserver(entries => {
    //   for (const entry of entries) {
    //     const { offsetWidth, offsetHeight } = entry.target
    //     Object.assign(floatBox.style, { width: `${offsetWidth + 2}px`, height: `${offsetHeight + 2}px` })
    //     this.popper && this.popper.update()
    //   }

this.createTerminal().then(() => {
            // An element resize detector is used to check when this element is
            // resized due to the pane resizing or due to the entire window
            // resizing.
            this.erd = elementResizeDetectorMaker({
              strategy: 'scroll'
            })
            this.erd.listenTo(this.mainDiv, (element) => {
              this.refitTerminal()
            })
            // Add an IntersectionObserver in order to apply new options and
            // refit as soon as the terminal is visible.
            this.terminalDivIntersectionObserver = new IntersectionObserver((entries, observer) => {
              // NOTE: Only the terminal div should be observed therefore there
              // should only be one entry.
              let entry = entries[0]
              this.terminalDivIntersectionRatio = entry.intersectionRatio
              this.applyPendingTerminalProfileOptions()
            }, {
              root: this,
              threshold: 1.0

mounted() {
        let erd = elementResizeDetectorMaker()
        let that = this
        // 监听元素width变化
        erd.listenTo(document.querySelectorAll('.time'), function(element) {
            that.timeWidth = element.offsetWidth
        })
        erd.listenTo(document.querySelectorAll('.secretkey'), function(element) {
            that.secretkeyWidth = element.offsetWidth
        })
    },
    methods: {

init() {
        this._super(...arguments);
        this.detector = erd({
            strategy: 'scroll'
        });
    },

this.dragScale = {
      left: this.boardElement.nativeElement.offsetLeft,
      right: this.boardElement.nativeElement.offsetWidth + this.boardElement.nativeElement.offsetLeft,
      top: this.boardElement.nativeElement.offsetTop,
      bottom: 0
    };

    this.autoBoardHeight();
    this.boardElement.nativeElement.style.width = '100%';
    this.boardElement.nativeElement.style.position = 'relative';
    this.cdr.detectChanges();

    let unitsOfGrid = Math.round(this.boardElement.nativeElement.offsetHeight / this.unitHeight + 0.49) * 12;
    this.updateGrids(unitsOfGrid);

    this.workspaceResizeDetector = elementResizeDetectorMaker();
    this.workspaceResizeDetector.listenTo(this.boardElement.nativeElement, element => {
      if (!this.enableResponsive) return;
      this.onWindowResize();
    });
  }

function resizeDetector(strategy = 'scroll') {
  if (!instances[strategy]) {
    instances[strategy] = createResizeDetector({
      strategy,
    })
  }

  return instances[strategy]
}

componentDidMount() {
    this.parentNode = ReactDOM.findDOMNode(this).parentNode
    this.elementResizeDetector = elementResizeDetectorMaker({
      strategy: 'scroll',
      callOnAdd: false
    })
    this.elementResizeDetector.listenTo(this.parentNode, this.onResize)
    this.componentIsMounted = true
    this.onResize()
  }

function addListener (component) {
  component._erd = elementResizeDetectorMaker({
    strategy: 'scroll'
  })

  component._erdWidth = component.refs.container.offsetWidth

  component._erd.listenTo(component.refs.container, (element) => {
    var width = element.offsetWidth

    if (component._erdWidth !== width) {
      component.resize(component.props)
      component._erdWidth = width
    }
  })
}

import ElementResizeDetector from "element-resize-detector";

let instance: ElementResizeDetector.Detector | undefined;
if (!instance) {
	instance = new ElementResizeDetector({ strategy: "scroll" });
}

export type Listener = ElementResizeDetector.Listener;
export default (instance as ElementResizeDetector.Detector);