How to use resize-observer - 4 common examples

To help you get started, we’ve selected a few resize-observer 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 gamejolt / frontend-lib / components / content / components / gif / gif.ts View on Github external
async mounted() {
		// Observe the change to the width property, the be able to instantly recompute the height.
		// We compute the height property of the element based on the computed width to be able to set a proper placeholder.
		this.resizeObserver = new ResizeObserver(() => {
			this.setHeight();
		});
		this.resizeObserver.observe(this.$refs.container);
	}
github gamejolt / frontend-lib / components / content / components / media-item / media-item.ts View on Github external
async mounted() {
		// Observe the change to the width property, the be able to instantly recompute the height.
		// We compute the height property of the element based on the computed width to be able to set a proper placeholder.
		this.resizeObserver = new ResizeObserver(() => {
			this.setHeight();
		});
		this.resizeObserver.observe(this.$refs.container);
	}
github gamejolt / frontend-lib / components / content / content-editor / content-editor.ts View on Github external
this.plugins = createPlugins(this, this.schema);

		if (this.value) {
			const doc = ContentDocument.fromJson(this.value);
			this.setContent(doc);
		} else {
			const state = EditorState.create({
				doc: DOMParser.fromSchema(this.schema).parse(this.$refs.doc),
				plugins: this.plugins,
			});

			this.createView(state);
		}

		// Observe any resize events so the editor controls can be repositioned correctly
		this.resizeObserver = new ResizeObserver(() => {
			this.stateCounter++;
		});
		this.resizeObserver.observe(this.$refs.doc);

		this.stateCounter++;

		this.focusWatcher = new FocusWatcher(this.$refs.editor, this.onFocusIn, this.onFocusOut);
		this.focusWatcher.start();

		if (this.view instanceof EditorView && this.autofocus) {
			this.$refs.editor.focus();
			this.view.focus();
		}
	}
github FreddyFY / styled-container-query / src / QueryContainer.js View on Github external
componentDidMount() {
    this.element = ReactDOM.findDOMNode(this)
    this.observer = new ResizeObserver(this.handleResize)
    this.observer.observe(this.element)
  }

resize-observer

An implementation and polyfill of the Resize Observer draft.

Apache-2.0
Latest version published 3 years ago

Package Health Score

53 / 100
Full package analysis

Popular resize-observer functions