How do I expand div smoothly when new content is added

user_16784520 0
Viewed 437

How do I make a div expand smoothly when content is added?

const [render, setRender] = useState(false)

    const showHide= () => {
        setRender(!render)
    }

  return (
    <div className="container">
      <h1>TEST CONTAINER</h1>
      {render && <Paragprah />}
      <button type="button" class="btn btn-primary" onClick={showHide}>Primary</button>
    </div>
  );
}

CSS

.container {
  margin-left: 30%;
  margin-top: 10%;
  width: 500px;
  height: auto;
  background-color: whitesmoke;
}

In the above, a component is being rendered when a button is clicked, when the new content is added to the div, it expands instantly. basically, I would like it to expand smoothly when the content is added. Here is a video as well by what I mean when it expands instantly.

Setting a fixed height wont work in my situation because the content that's being loaded is dynamic, its coming from an API and the length is different everytime. So setting a fixed height will make the content overflow sometimes. I need a way where the transition can occur smoothly and the height still be large enough to fit the content, which would probably require ```height: auto;`` to be present?

Link to Imgur video

reactjs css html javascript
2 Answers

Here I updated the code. Since the content that's being loaded has dynamic size then you have to track that content size using useRef hook and store it on a variable and export it with your component.

import { useRef, useEffect} from "react";

var ParagraphHeight;

function Paragraph() {
  const ref = useRef(null);

  useEffect(() => {
    //when you content is loaded store its height
    ParagraphHeight = ref.current.offsetHeight;
  }, []);

  return (
    <div ref={ref}>
      <p>Your content here for exemple...</p>
    </div>
  );
}

export { Paragraph, ParagraphHeight };

Now import your Paragraph component and put it inside a .wrapper div that has a default height of 0px (that means your Paragraph will be hidden) and when you click on the button the height of it will change to the ParagraphHeight

import { useState } from "react";
import { Paragraph, ParagraphHeight } from "./Paragraph.js";

export default function App() {
  const [isopned, setisopned] = useState(false);
  const [wrapperHeight, setWH] = useState(0);
  const showHide = () => {
    if (!isopned) setWH(ParagraphHeight);
    else setWH(0);
    setisopned(!isopned);
  };

  return (
    <div className="container">
      <h1>TEST CONTAINER</h1>
      <div className="wrapper" style={{ height: wrapperHeight }}>
        <Paragraph />
      </div>
      <button type="button" className="btn btn-primary" onClick={showHide}>
        Primary
      </button>
    </div>
  );
}

Finally don't forget to update your css, add overflow-y hidden and css transition to to expand your wrapper div smoothly.

.container {
  margin-left: 30%;
  margin-top: 10%;
  width: 500px;
  background-color: whitesmoke;
}

.wrapper {
  display: grid; /*to prevent some problem caused by overflow hidden*/
  transition: height 1s linear;
  background-color: wheat;
  overflow-y: hidden;
}

This is a live exemple demo

user_169475840

you can use the transition css property for a smooth transition.

transition: height 2s;

Follow this link for reference.

user_119680890
Related