CODEWITHSUNDEEP
javascriptreactjs
Laczkó Örs
Laczkó Örs

Reputation: 1108

How to get a width of a div when using ReactJS?

First of all I'm aver that someone already asked this question (this) but I don't exactly know how to use the answer in my project.

My problem:

I have a div with an id of square. I want to get the width of this element, and this is my code:

import React, { useEffect, useState } from 'react';
import './login.css';
import * as firebase from 'firebase';

//pic imports
//...
/pic imports end

function Login() {
  const pics_slide_ref = React.createRef();

  const [width, setWidth] = 0;

  useEffect(() => {
    if (pics_slide_ref.current) {
      setWidth(pics_slide_ref.current.getBoundingClientRect().width);
      console.log(width);
    }
  }, [])



  var choosenProfile = 'pic_1';
  function profileChoosen(id) {
    document.getElementById(choosenProfile).classList.remove('choosen');
    choosenProfile = id;
    document.getElementById(choosenProfile).classList.add('choosen');
  }

  return (
    <div className="login">
      <div className="login-container">
        <input placeholder="Your Email..." />
        <input placeholder="Your Username..." />
        <input placeholder="Your password..." />
        <div className="loged-out">
          <button className="sign-in">Sign in</button>
          <button className="sign-up">Sign up</button>
        </div>
        <div className="loged-in">
          <button className="sign-out">Sign out</button>
        </div>


      </div>

      <div className="pic-container">
        <div className="pic-choos">
          <span>Choose a profile pic</span>
        </div>
        <div className="pics">
          <div className="pics-compact">
            <span>&#60;</span>
            <div ref={pics_slide_ref} id="pics-slide-space" className="pics-slide-space">
              <div id="pics-slide-1" className="pics-slide-1">
                <img src={pic_1} alt="#" id="pic_1" onClick={() => profileChoosen('pic_1')} />
                <img src={pic_2} alt="#" id="pic_2" onClick={() => profileChoosen('pic_2')} />
                <img src={pic_3} alt="#" id="pic_3" onClick={() => profileChoosen('pic_3')} />
                <img src={pic_4} alt="#" id="pic_4" onClick={() => profileChoosen('pic_4')} />
                <img src={pic_5} alt="#" id="pic_5" onClick={() => profileChoosen('pic_5')} />
                <img src={pic_6} alt="#" id="pic_6" onClick={() => profileChoosen('pic_6')} />
                <img src={pic_7} alt="#" id="pic_7" onClick={() => profileChoosen('pic_7')} />
                <img src={pic_8} alt="#" id="pic_8" onClick={() => profileChoosen('pic_8')} />
                <img src={pic_9} alt="#" id="pic_9" onClick={() => profileChoosen('pic_9')} />
                <img src={pic_10} alt="#" id="pic_10" onClick={() => profileChoosen('pic_10')} />

              </div>
            </div>
            <span>&#62;</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;

Unfortunately it does not work. Is there a simple way of getting the width? If there isn't can someone explain me in details that how to do it?

Upvotes: 1

Views: 2879

Answers (2)

user9408899
user9408899

Reputation: 4540

You can use ref and getBoundingClientRect() to get width of any element.

Define a ref in your constructor:

this.myRef = React.createRef()

Then, attach it to your component.

<YourComponent ref={this.myref} />

Then, call getBoundingClientRect() like this:

myref.current.getBoundingClientRect().width

Upvotes: 4

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

You actually need to assign the ref to the div. Use the ref in combination with useState() and useEffect(). We integrate useEffect() because it runs right after the first render of the component, thus ensuring that the div and hence ref is valid.

Then we get the width of the div and store it in state so you can use it in your mark-up.

import React, {useEffect, useState} from 'react';

function SquareHolder() {
    const [width, setWidth] = useState(0)
    const square_ref = React.createRef();

    useEffect(() => {
       if(square_ref.current){
          setWidth(square_ref.current.getBoundingClientRect().width)
       }
    }, [])


    return (
        <div className="square" ref={square_ref}>
            The width is: {width}
        </div>
    );
}

export default SquareHolder;

See working sandbox: https://codesandbox.io/s/agitated-sara-fp319

Upvotes: 2

Related Questions