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

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:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js:



    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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=
            <div>
              <button onClick={this.handleClick}>Get image details</button>
            </div>
            {this.renderDetails()}
          </div>    
        )  
      
    }
    export default App

    chevron_right

    
    

Output :

Example 2: 

  • index.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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=
            <div>
              <button onClick={this.handleClick}>
                Fetch dimension
              </button>
            </div>
          </div>    
        )  
      
    }
    export default App

    chevron_right

    
    

Output :

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.