Warning: session_start(): open(/tmp/sess_110cb402651b5219f65467adea0cf687, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Get The Parent Height And Width In React - LearnShareIT

How To Get The Parent Height And Width In React

Get the Parent height and width in React

If you don’t know how to get the Parent height and width in React, don’t worry. We will give you some ways to do it in this article. Read on it now.

Get the Parent height and width in React

Use ref.current.offsetHeight and ref.current.offsetWidth method

A ref is a tag or element’s self-representative attribute in React. We can get to the mounted DOM node or React element with ref. By calling document.getElementById(), we can work with DOM elements in standard Javascript. We don’t have to work with React’s references. The ref attribute will refer to the specified element. This way, we will use the useRef hook to represent the parent <div> tag.

Code:

import { useEffect, useRef, useState } from "react";
 
export default function App() {
  const ref = useRef(null);
  const [parentHeight, setParentHeight] = useState(0);
  const [parentWidth, setParentWidth] = useState(0);
 
  useEffect(() => {
    //Set State to parent width and height
    setParentHeight(ref.current.offsetHeight);
    setParentWidth(ref.current.offsetWidth);
  }, []);
 
  return (
    <div ref={ref}>
      <h2>Get the Parent parentHeight and width | LearnShareIT</h2>
      <h3>Parent width: {parentWidth}</h3>
      <h3>Parent height: {parentHeight}</h3>
    </div>
  );
}

Output:

So through ref. current, we got the parent tag’s length and width attributes by calling offsetWidth and offsetHeight. Then we set the state parent width and parent height to their respective values ​​and rendered them to the screen as shown above.

Use react-use method

The react-use library includes an extensive collection of hooks, much larger than any other hooks library, including hooks that can interact with hardware that the browser can access. In this article, we will learn some hooks through an example and list all the ones the library has.

Terminal:

npm i react-use

After installing the library, we will use the useSize hook in the react-use library because this hook can keep track of the size of the HTML element.

Code:

import { useSize } from "react-use";

export default function App() {
  const [sized, { width, height }] = useSize(
    () => (
      <div>
        <h2>Get the Parent parentHeight and width | LearnShareIT</h2>
      </div>
    ),
    { width: 100, height: 100 }
  );
  return (
    <div className="App">
      <div>
        {sized}
        <h3>Parent width: {width}</h3>
        <h3>Parent height: {height}</h3>
      </div>
    </div>
  );
}

And the output is the same result as above, but it seems much faster. This library is functional and has many valuable hooks. It would help if you researched more about it. I hope the methods are helpful to you.

Summary

To summarize, there are many ways to get the Parent height and width in React. After reading this article, we know some simple ways like using ref.current.offsetHeight and ref. current.offsetWidth method or using the react-use method. Let’s try these methods. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *