JSFiddle - React, Tailwind, and code Playground

Resize Observer

by Travis Almand

HTML

<div id="container"></div>

<nav id="menu">
  <a href="https://www.google.com">google</a>
  <a href="https://www.yahoo.com">yahoo</a>
  <a href="https://www.bing.com">bing</a>
  <a href="https://www.duckduckgo.com">duckduckgo</a>
  <a href="https://www.dogpile.com/">dogpile</a>
  <a href="https://www.ask.com">ask</a>
  <a href="https://www.excite.com">excite</a>
</nav>

SCSS

#container {
  border: 3px solid rebeccapurple;
  height: 100px;
  margin: 20px;
  width: 200px;
  
  &:hover {
    width: 300px;
  }
}

#menu {
  align-items: center;
  border: 3px solid rebeccapurple;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  
  a {
    border: 1px solid red;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 100px;
  }
}

JavaScript

/* const callback = function (entries, observer) {
  console.log(observer);
  console.log(entries);
}
const resizeObserver = new ResizeObserver(callback);
resizeObserver.observe(document.querySelector('#container')); */

const menuCallback = function (entries, observer) {
	const entry = entries[0];
  const links =	entry.target.children;
  
  console.log(entry.contentRect.width);
  
 	
  
  Object.keys(links).forEach(key => {
  	const link = links[key];
  });
}
const menuResizeObserver = new ResizeObserver(menuCallback);
menuResizeObserver.observe(document.querySelector('#menu'));