Skip to main content

Handling viewport/screen resizing

The builder cannot monitor changes in the dimensions of a custom host element used for rendering the builder. So you need to notify the builder when the dimensions of this host element change. That allows the builder to adapt to the new dimensions of the viewport.

info

This is only necessary when using a custom HTML element for rendering the builder. If you don't specify an element for the builder it will render in the document body and resizing is detected automatically.

The most common scenario is a browser window resize or screen orientation change. In both cases, you should monitor this and then invoke the resize method of your builder instance. You can also use the ResizeObserver API for this when you target modern browsers.

info

There is no need to debounce calls to the resize method. This is already done inside the builder.

Example using global resize events

This example shows how to use the resize and orientationchange events of the browser.

import { Builder } from "tripetto";

const builder = new Builder({
element: document.getElementById("CustomElement")
});

builder.open();

// Upon window resize notify the builder
window.addEventListener("resize", () => builder.resize());
window.addEventListener("orientationchange", () => builder.resize());

Run Try on CodePen

Example using ResizeObserver

If you target modern browsers, you can use the ResizeObserver API to monitor changes in the dimensions of the host element. This can be more efficient than listening to the global resize event of the browser window. Especially in a component-based approach like when using React.

import { Builder } from "tripetto";

// Let's assume you have a host element with the id `CustomElement`
const element = document.getElementById("CustomElement");

const builder = new Builder({
element,
onClose: () => {
resizeObserver.disconnect();
}
});

const resizeObserver = new ResizeObserver(() => {
builder.resize();
});

resizeObserver.observe(element);
builder.open();

Run Try on CodePen