How to use the resize-observer-polyfill function in resize-observer-polyfill

To help you get started, we’ve selected a few resize-observer-polyfill 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 ZeeCoder / container-query / packages / container-query / src / Container.js View on Github external
// @flow
import processMeta from "./processMeta";
import adjustContainer from "./adjustContainer";
import objectAssign from "object-assign";
import ResizeObserver from "resize-observer-polyfill";
import MutationObserver from "mutation-observer";
import raf from "raf";
import containerRegistry from "./containerRegistry";
import type { ContainerSize, Meta, RegistryData } from "../flow/types";
import { QUERIES } from "@zeecoder/container-query-meta-builder";

const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
  if (!Array.isArray(entries)) {
    return;
  }

  entries.forEach(entry => {
    const data: RegistryData = containerRegistry.get(entry.target);

    if (
      typeof data === "undefined" ||
      typeof data !== "object" ||
      typeof data.instance !== "object" ||
      typeof data.instance.adjust !== "function"
    ) {
      console.warn(
        "Could not find Container instance for element:",
        entry.target
github awehook / blink-mind-react / src / component / common / DragScrollWidget.tsx View on Github external
contentResizeCallback = (
    entries: ResizeObserverEntry[],
    observer: ResizeObserver
  ) => {
    if (this.oldContentRect) {
      const widgetStyle = {
        width: this.content.clientWidth + this.viewBox.clientWidth * 2,
        height: this.content.clientHeight + this.viewBox.clientHeight * 2
      };
      this.bigView.style.width = widgetStyle.width + 'px';
      this.bigView.style.height = widgetStyle.height + 'px';
    }
    this.oldContentRect = entries[0].contentRect;
  };

  contentResizeObserver = new ResizeObserver(this.contentResizeCallback);
  // oldScroll: { left: number; top: number };
  oldContentRect: DOMRectReadOnly;
  content: HTMLElement;
  contentRef = ref => {
    if (ref) {
      this.content = ref;
      this.contentResizeObserver.observe(this.content);
    }
  };

  viewBox: HTMLElement;
  viewBoxRef = ref => {
    if (ref) {
      this.viewBox = ref;
      this.setViewBoxScroll(
        this.viewBox.clientWidth,
github du5rte / react-skroll / src / ScrollProvider.jsx View on Github external
setNode(node) {
    this.node = node

    // add component to resize observer to detect changes on resize
    this.resizeObserver = new ResizeObserver((entries, observer) => {
      if (this.state.ready) {
        this.handleResize()
      } else {
        this.setStateScroll({
          ready: true
        })
      }
    })

    this.resizeObserver.observe(this.node)
  }
github legumeinfo / lis_context_viewer / client / src / assets / js / gcv / visualization / plot.ts View on Github external
private autoResize() {
    const scope = this;
    const ro = new ResizeObserver((entries) => {
      clearTimeout(this.resizeTimer);
      const id = this.resizeTimer = setTimeout(() => {
        const width = Math.max(this.container.clientWidth, this.container.clientHeight);
        // NOTE: shouldn't have to check if circos is undefined if scope is correct...
        if (this.viewer !== undefined && this.viewer.attr("width") !== width) {
          this.destroy();
          this.draw();
        }
      }, this.options.resizeDelay);
    });
    ro.observe(this.container);
  }
github ksc-fe / kpc / components / carousel / index.js View on Github external
_initStatus() {
        const init = () => {
            this.containerWidth = this.element.offsetWidth;

            this._stopTransition();
            this._setIndex(this._getIndex(), false);
            this._startTransition();
        }

        const ro = this.ro = new ResizeObserver(init);
        ro.observe(this.element);

        init();
    }
github one-dragon / webpack4-vue / src / components / common / ScrollBar.vue View on Github external
addResizeListener(element, fn) {
                const isServer = typeof window === 'undefined';
                if (isServer) return;
                if (!element.__resizeListeners__) {
                    element.__resizeListeners__ = [];
                    element.__ro__ = new ResizeObserver(this.resizeHandler);
                    element.__ro__.observe(element);
                }
                element.__resizeListeners__.push(fn);
            },
            removeResizeListener(element, fn) {
github triplecanopy / b-ber / packages / b-ber-reader / src / components / Marker.jsx View on Github external
connectObservers() {
    this.resizeObserver = new ResizeObserver(
      this.calculateNodePositionAfterResize
    )
    this.resizeObserver.observe(this.contentNode)
  }
github implausible / rickscroll / src / js / AutoAdjust.jsx View on Github external
constructor(props) {
    super(props);
    this.state = {
      height: 0,
      width: 0
    };
    this._autoAdjustDiv = null;
    this._getRef = this._getRef.bind(this);
    this._getRickscroll = this._getRickscroll.bind(this);
    this._updateDimensions = this._updateDimensions.bind(this);
    this._resizeObserver = new ResizeObserver(this._updateDimensions);
    this.scrollRowToMiddle = this.scrollRowToMiddle.bind(this);
    this.scrollTo = this.scrollTo.bind(this);
    this.scrollToHeader = this.scrollToHeader.bind(this);
    this.toggleSection = this.toggleSection.bind(this);
  }
github Alexays / Epiboard / src / components / Home / main.js View on Github external
created() {
    if (!this.$options.isPreRender) {
      this.checkVersion();
    }
    this.$options.ro = new ResizeObserver(this.onResize);
  },
  mounted() {
github whoisandy / react-rangeslider / src / Rangeslider.js View on Github external
componentDidMount () {
    this.handleUpdate()
    const resizeObserver = new ResizeObserver(this.handleUpdate)
    resizeObserver.observe(this.slider)
  }