[FIXED] how to get width of an element dynamically in reactjs?

Issue

I have this span element. am fetching data and putting some text in that span element, therefore sometimes that span elements width is 200 px, sometimes its 100px. I want this span to have margin-right: half of its width. I am using this technique:

const [width, setWidth] = useState()

    const ref = useRef(null)
  useLayoutEffect(()=>{
        setWidth(ref.current.offsetWidth);
      },[])



 <span className='big ' id='meria' ref={ref} style={{marginRight:  width / 2    }}>sometext</span>

I want the width element to re-render on change of window.location.pathname, but I cant use that as dependency. any tips?

Solution

Do you use a seperate CSS-stylesheet? (even if you don't this still should work, because it's basically just CSS) - If yes you can easily do some CSS trickery to get the same effect without a single line of JS needed You would do that as follows:

Wrap the span (or whatever element you want to have the dynamic margin for) in a div - this div then gets the width: fit-content - you can now set margin-right: 50% on your span element. This is everything you need for your desired result (The 50% always are calculated from the parent ... and with fit-content the parent will be the childs width)

Since you are using spans you'll need to add white-space: nowrap to the span (otherwise the span wouldn't overflow out of the div and just linebreak, which is not what we want)

span {
  margin-left: 50%;
  width: fit-content;
  white-space: nowrap;
  border: solid
}

.container {
  width: fit-content;
}

<div class="container">
  <span>short one</span>
</div>

<div class="container">
  <span>this one is longer</span>
</div>

<div class="container">
  <span>and this one is even longer than the one before</span>
</div>

I used margin-left for demonstartion purpouse (just change it tho whatever you need . the snippet is more to show what I meant, and show the dinamically changing maring based on width of the span)

Answered By - Lord-JulianXLII
Answer Checked By - - Willingham (ReactFix Volunteer)