How to get HTML element width dynamically even on page resize in React?

Question

I would like to dynamically get the div element's width. With useRef, I can get the width of my div, but when I resize my page, the width value doesn't update automatically. Can you tell me what I need to do to make this happen?

Here's my code I put into Codesandbox.io, and an overview here:

import React from "react";
import "./styles.css";

const App = () => {
  const ref = React.useRef(null);
  const [width, setWidth] = React.useState(0);

  React.useEffect(() => {
    setWidth(ref.current.offsetWidth);
  }, [width]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          border: "1px solid red"
        }}
        ref={ref}
      >
        Width: {width}
      </div>
    </div>
  );
};

export default App;

Youssouf Oumar · Accepted Answer · 2023-09-11 08:19:40Z

9

Change your useEffect as below, so you add an event listener for when you resize the page. Also, notice I removed the width state from the dependency array:

import { useEffect, useRef, useState } from "react";

export default function App() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    // when the component gets mounted
    setWidth(ref.current.offsetWidth);
    // to handle page resize
    const getwidth = () => {
      setWidth(ref.current.offsetWidth);
    };
    window.addEventListener("resize", getwidth);
    // remove the event listener before the component gets unmounted
    return () => window.removeEventListener("resize", getwidth);
  }, []);

  return <div ref={ref}>Width: {width}</div>;
}

edited Sep 11, 2023 at 8:19

answered Jun 30, 2022 at 21:26

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get HTML element width dynamically even on page resize in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related