Robo Krzw
Robo Krzw

Reputation: 13

How to get element's height and then use it to set another element's height

I have an img element with id='contour' that is responsive. On top of it I have an SVG element (id='wisla-id'), which I need to resize with the img.

export const Polska = () => {
  const [riverVisible, setRiverVisible] = useState(false)
    
  return (
    <div>
      <Row>
        <Col className='list-of-landscapes' sm={12} md={2} >
            <ul>
                <li>
                  <button onClick={() => setRiverVisible(!riverVisible)}>rzeki</button>
                </li>
                <li>
                  <button>jeziora</button>
                </li>
            </ul>
        </Col>
        <Col sm={12} md={10} className="rivers-box">
          
          <img className='contour' src="images/polska-kontur.jpg" alt='polska'/>
          <Col className='rivers'>
            <Wisla riverVisible={riverVisible} setRiverVisible={setRiverVisible} />
          </Col> 
        </Col>
      </Row>
      
    </div>
  )
}

export default Polska
export const Wisla = ({riverVisible}) => {

    return (
        <svg id='wisla-id' className={classNames('wisla', riverVisible && "visible")} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.47 625.89">
            <g id="Warstwa_2" dataName="Warstwa 2">
                <g id="Warstwa_2-2" dataName="Warstwa 2">
                    <Tooltip title='wisla wisla wisla wisla wisla wisla wisla wisla' followCursor>
                        <path
                            className="cls-wisla"
                            d="M67.06,0V22.72l-6,6.14v52.8l-6.6,8.6v16l-6,11.67-13.8,6.75L4.06,162.1l45.6,19,9,17.19,15,19,28.2,10.43,48,
                            23.34,4.8,5.52h27l10.8-5.52,17.4,2.45,25.8,23.33,15,43.16,10.8,7.19,5.4,21.49,33,16,9.6,25.78-12,8.6,6.6,73.68-21,
                            25.79-31.2,19.65-21.6,8-7.2,8.59h-9l-13.2,14.74h-15.6l-9,8.6h-6.6l-2.4,7.36h-30.6l-5.4,6.32-12.6,
                            2.89-13.2-8.59-13.2-2.46-9.6.62-7.2,10.43-24,6.14.6,12.28,2.4,22.11,12.6,8.59">
                        </path>
                    </Tooltip>
                </g>
            </g>
        </svg>
    )
}

I'm trying to figure out how to dynamically take 90% of img id='contour' height and set it to svg id='wisla-id'. I guess useRef should be used but I'm not sure how to do it correctly. I will be grateful for any clues.

Upvotes: 1

Views: 60

Answers (1)

CptSosen
CptSosen

Reputation: 158

You can use ref hook, then get ref.current.height of that component:

export const Polska = () => {
const [riverVisible, setRiverVisible] = useState(false)
const contourRef = useRef()

return (
<div>
  <Row>
    <Col className='list-of-landscapes' sm={12} md={2} >
        <ul>
            <li>
              <button onClick={() => 
              setRiverVisible(!riverVisible)}>rzeki</button>
            </li>
            <li>
              <button>jeziora</button>
            </li>
        </ul>
    </Col>
    <Col sm={12} md={10} className="rivers-box">
      
      <img className='contour' ref={contourRef} 
       src="images/polska-kontur.jpg" 
       alt='polska'/>
      <Col className='rivers'>
        <Wisla riverVisible={riverVisible} setRiverVisible= 
          {setRiverVisible} contourHeight={contourRef.current?.clientHeight} />
      </Col> 
    </Col>
  </Row>
  
  </div>
 )
}

export default Polska

Then pass it to sub-component:

export const Wisla = ({riverVisible, contourHeight}) => {
computedHeight = useMemo(() => contourHeight * 0.9, 
[contourHeight])

return (
    <svg id='wisla-id' heigth={computedHeight} className={classNames('wisla', riverVisible && "visible")} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.47 625.89">
        <g id="Warstwa_2" dataName="Warstwa 2">
            <g id="Warstwa_2-2" dataName="Warstwa 2">
                <Tooltip title='wisla wisla wisla wisla wisla wisla wisla wisla' followCursor>
                    <path
                        className="cls-wisla"
                        d="M67.06,0V22.72l-6,6.14v52.8l-6.6,8.6v16l-6,11.67-13.8,6.75L4.06,162.1l45.6,19,9,17.19,15,19,28.2,10.43,48,
                        23.34,4.8,5.52h27l10.8-5.52,17.4,2.45,25.8,23.33,15,43.16,10.8,7.19,5.4,21.49,33,16,9.6,25.78-12,8.6,6.6,73.68-21,
                        25.79-31.2,19.65-21.6,8-7.2,8.59h-9l-13.2,14.74h-15.6l-9,8.6h-6.6l-2.4,7.36h-30.6l-5.4,6.32-12.6,
                        2.89-13.2-8.59-13.2-2.46-9.6.62-7.2,10.43-24,6.14.6,12.28,2.4,22.11,12.6,8.59">
                    </path>
                </Tooltip>
            </g>
        </g>
    </svg>
)

}

Upvotes: 1

Related Questions