Dynamic Dimension React Container with Transition Effect - Part 1

#css #react #javascript #transition

The Issue

Sometimes, we want our container to dynamically fit the size of its content, such as navigation bar with dropdown menu.

The size of the content may not always be a fixed value, and CSS transition hates that.

We know CSS style like this will create a smooth transition.

.menu{
  height:0;
  transition: 0.3s;
}

.menu:hover{
  height:300px;
}

However, this will not work since css transition needs a numeric value to work with.

.menu{
  height:0;
  transition: 0.3s;
}

.menu:hover{
  height:fit-content;
}

Method 1

We can use ref and getBoundingClientRect to get the content's dimension

Here is a demo:

and the code of the container:


function DynamicContainer({ children, className, style }) {
  const content = useRef(null);
  const [rect, setRect] = useState({ width: 0, height: 0 });

  useEffect(() => {
    setRect(content.current.getBoundingClientRect());
  }, [children]); //Only update dimension when children change
  return (
    <div
      className={className}
      style={{
        transition: "0.3s",
        height: `${rect.height}px`,
        width: `${rect.width}px`,
        overflow: "hidden",
        ...style
      }}
    >
      {/* The inter container for calculating the content dimension*/}
      <div
        ref={content}
        style={{
          width: "fit-content",
          height: "fit-content"
        }}
      >
        {children}
      </div>
    </div>
  );
}