@bedrock-layout/register-resize-callback

Use cases

A wrapper that registers a callback to be called when a node is resized.

How to install

  yarn add @bedrock-layout/register-resize-callback

init

Before you can use the register-resize-callback package, you need to initialize it. This is done by calling the init function. The init function will initialize the ResizeObserver so it is important that this function is only run in the browser. It can, however, be called multiple times without any harm.

For example, if you want to use the register-resize-callback package in a React application, you can call init in the useEffect function, like this:

import { init } from '@bedrock-layout/register-resize-callback';

useEffect(() => {
  init();
}, []);

Basic usage

After you have initialized the register-resize-callback you can use the registerCallback function to register a callback. The registerCallback function takes a callback function and a node as arguments. The callback function will be called when the node is resized. The callback can be in the form of a function that accepts a ResizeObserverEntry as an argument or it can be an object with a current property that is a function that accepts a ResizeObserverEntry as an argument.

The registerCallback function returns a function that can be used to unregister the callback.

import { registerCallback } from '@bedrock-layout/register-resize-callback';

const callback = (entry) => {
  console.log(entry);
};

const callbackObj = {
  current: (entry) => {
    console.log(entry);
  }
};

const header = document.querySelector('header');

const article = document.querySelector('article');

//register a callback for a node
const cleanupHeader = registerCallback(header, callback)

const cleanupArticle = registerCallback(article, callbackObj)

callbackObj.current = (entry)=>{
  console.log('new callback', entry);
};

//unregister the callback
cleanupHeader()
cleanupArticle()