# ResizeObserver

class

A helper class which instances allow performing custom actions when native DOM elements are resized.

```typescript
const editableElement = editor.editing.view.getDomRoot();

const observer = new ResizeObserver( editableElement, entry => {
	console.log( 'The editable element has been resized in DOM.' );
	console.log( entry.target ); // -> editableElement
	console.log( entry.contentRect.width ); // -> e.g. '423px'
} );
```

It uses the [native DOM resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) under the hood.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L28)

<a id="properties">

## Properties

<a id="member-element">

### `element: Element` _(readonly)_

The element observed by this observer.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L76)

<a id="member-_callback">

### `_callback: ( entry: ResizeObserverEntry ) => void` _(private)_

The callback executed each time [`_element`](#member-_element) is resized.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L37)

<a id="member-_element">

### `_element: Element` _(private)_

The element observed by this observer.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L32)

#### Static properties

<a id="static-member-_elementCallbacks">

### `_elementCallbacks: Map<Element, Set<( entry: ResizeObserverEntry ) => void>> | null` _(private)_

A mapping of native DOM elements and their callbacks shared across all [`ResizeObserver`](module_utils_dom_resizeobserver-ResizeObserver.md) instances.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L48)

<a id="static-member-_observerInstance">

### `_observerInstance: ResizeObserver | null` _(private)_

The single native observer instance shared across all [`ResizeObserver`](module_utils_dom_resizeobserver-ResizeObserver.md) instances.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L42)

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( element, callback )`

Creates an instance of the `ResizeObserver` class.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L59)

#### Parameters

* `element: Element`

  A DOM element that is to be observed for resizing. Note that the element must be visible (i.e. not detached from DOM) for the observer to work.

* `callback: ( entry: ResizeObserverEntry ) => void`

  A function called when the observed element was resized. It passes the [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) object with information about the resize event.

<a id="function-destroy">

### `destroy() → void`

Destroys the observer which disables the `callback` passed to the [`constructor`](#function-constructor).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L83)

#### Returns

* `void`

#### Static methods

<a id="static-function-_addElementCallback">

### `_addElementCallback( element, callback ) → void` _(private)_

Registers a new resize callback for the DOM element.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L90)

#### Parameters

* `element: Element`
* `callback: ( entry: ResizeObserverEntry ) => void`

#### Returns

* `void`

<a id="static-function-_createObserver">

### `_createObserver() → void` _(private)_

Creates the single native observer shared across all `ResizeObserver` instances.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L144)

#### Returns

* `void`

<a id="static-function-_deleteElementCallback">

### `_deleteElementCallback( element, callback ) → void` _(private)_

Removes a resize callback from the DOM element. If no callbacks are left for the element, it removes the element from the native observer.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L109)

#### Parameters

* `element: Element`
* `callback: ( entry: ResizeObserverEntry ) => void`

#### Returns

* `void`

<a id="static-function-_getElementCallbacks">

### `_getElementCallbacks( element ) → Set<( entry: ResizeObserverEntry ) => void> | null | undefined` _(private)_

Returns are registered resize callbacks for the DOM element.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/resizeobserver.ts#L133)

#### Parameters

* `element: Element`

#### Returns

* `Set<( entry: ResizeObserverEntry ) => void> | null | undefined`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)