React - Listening for div width change

Question

I am trying to set a listener to determine the width of a particular div within my application. If the div is less than 800px wide, I'd like to set the style to display: none. I'm able to do it as is, but it doesn't listen to it and only removes the div if I refresh the page.

const [style, setStyle] = useState({});
const documentRef = useRef(null);

useEffect(() => {
  if (documentRef.current.offsetWidth < 800) {
    const updatedStyle = {
      display: 'none',
    }
    setStyle(updatedStyle);
  }
}, [documentRef.current]);

Not sure, but [this](https://stackoverflow.com/questions/34407186/how-to-detect-html-div-width-and-height-once-div-is-done-resizing) might help. — Debargha Roy, Oct 19 '20 at 16:20

score 0 · Answer 1 · answered Oct 19 '20 at 16:18

0

You can use CSS media query to hide something when below 800 px.

@media only screen and (max-width: 800px) {
  show-lg-only {
    display: none;
  }
}

answered Oct 19 '20 at 16:18

Aadil Mehraj

2,586
1
7
17

i'm trying to do it when a specific div is less than 800px, not the entire screen. – Nick Oct 19 '20 at 16:18
You can add the same class to specific div – Aadil Mehraj Oct 19 '20 at 16:19
Right, but that will occur when the `screen` is less than 800px width, not the div. – Nick Oct 19 '20 at 16:20

React - Listening for div width change

1 Answers1