How to get the height and width of an Image using ReactJS? - GeeksforGeeks

30 Sep, 2020
In reacting whatever we write that looks like HTML is not pure HTML actually. All the HTML looking stuff are JSX, Behind the scene, they are converted to vanilla JavaScript using babel. These all work in this way to make the developers’ life easier. Since JSX are not HTML that’s why we do have any direct reference to the HTML elements and that’s why we can’t direct fetch properties of any HTML element. To fetch the elements’ property, React gives something called as ‘ref’. Using ref we can create a direct reference to any HTML elements and get controlled over HTML elements properties. Here we use the ‘ref’ system to fetch image height and width.
Example 1: This example illustrates how to fetch the current height and width of the image.
index.js:JavascriptJavascriptimport React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
index.js:
Javascript
import React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
App.js:JavascriptJavascriptimport React, { Component } from 'react'class App extends Component{  constructor(props){     super(props)       // Initialize count state     this.state = {show : false}    // Bind context of 'this'    this.handleClick = this.handleClick.bind(this)    // Create reference of DOM object    this.imgRef = React.createRef()  }     renderDetails() {    return this.state.show ?       // Accessing image details using imgRef      <div>          <p><strong>Height : </strong>         {this.imgRef.current.clientHeight}px</p>            <p><strong>Width : </strong>         {this.imgRef.current.clientWidth}px</p>        </div> : null  }    handleClick(){      // Update state value    this.setState({      show : true    })  }    render(){    return(       <div>         <h3>GeeksforGeeks</h3>        {/* Assign reference to DOM element     */}        <img ref={this.imgRef} src='https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2-300x177.png' alt='gfg' />        <div>          <button onClick={this.handleClick}>Get image details</button>        </div>        {this.renderDetails()}      </div>        )    } }export default App
App.js:
Javascript
import React, { Component } from 'react'class App extends Component{  constructor(props){     super(props)       // Initialize count state     this.state = {show : false}    // Bind context of 'this'    this.handleClick = this.handleClick.bind(this)    // Create reference of DOM object    this.imgRef = React.createRef()  }     renderDetails() {    return this.state.show ?       // Accessing image details using imgRef      <div>          <p><strong>Height : </strong>         {this.imgRef.current.clientHeight}px</p>            <p><strong>Width : </strong>         {this.imgRef.current.clientWidth}px</p>        </div> : null  }    handleClick(){      // Update state value    this.setState({      show : true    })  }    render(){    return(       <div>         <h3>GeeksforGeeks</h3>        {/* Assign reference to DOM element     */}        <img ref={this.imgRef} src='https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2-300x177.png' alt='gfg' />        <div>          <button onClick={this.handleClick}>Get image details</button>        </div>        {this.renderDetails()}      </div>        )    } }export default App
Output :
Example 2: 
index.js:JavascriptJavascriptimport React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
index.js:
Javascript
import React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
App.js:JavascriptJavascriptimport React, { Component } from 'react'class App extends Component{  constructor(props){     super(props)       // Initialize count state     this.state = {height:null, width:null, isIncrease:false}      // Bind context of 'this'    this.handleClick = this.handleClick.bind(this)      // Create reference of DOM object    this.imgRef = React.createRef()  }     handleClick(){      // Fetching current height and width    const height = this.imgRef.current.clientHeight    const width = this.imgRef.current.clientWidth    alert(`      Height : ${height}      Width : ${width}    `)  }    render(){    return(       <div>         <h3>GeeksforGeeks</h3>        {/* Assign reference to DOM element     */}        <img ref={this.imgRef} src='https://media.geeksforgeeks.org/wp-content/uploads/20200819170816/colorfulbulmaheroelements-300x154.png' alt='gfg' />        <div>          <button onClick={this.handleClick}>            Fetch dimension          </button>        </div>      </div>        )    } }export default App
App.js:
Javascript
import React, { Component } from 'react'class App extends Component{  constructor(props){     super(props)       // Initialize count state     this.state = {height:null, width:null, isIncrease:false}      // Bind context of 'this'    this.handleClick = this.handleClick.bind(this)      // Create reference of DOM object    this.imgRef = React.createRef()  }     handleClick(){      // Fetching current height and width    const height = this.imgRef.current.clientHeight    const width = this.imgRef.current.clientWidth    alert(`      Height : ${height}      Width : ${width}    `)  }    render(){    return(       <div>         <h3>GeeksforGeeks</h3>        {/* Assign reference to DOM element     */}        <img ref={this.imgRef} src='https://media.geeksforgeeks.org/wp-content/uploads/20200819170816/colorfulbulmaheroelements-300x154.png' alt='gfg' />        <div>          <button onClick={this.handleClick}>            Fetch dimension          </button>        </div>      </div>        )    } }export default App
Output :
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
Node.js fs.readFileSync() Method
How to calculate the number of days between two dates in javascript?