Get Viewport/window Height in Reactjs

Get viewport/window height in ReactJS

When working with ReactJS, you may often come across the need to get the height of the viewport or window. This can be useful for various purposes such as dynamically adjusting the layout or determining the size of elements on the screen. In this article, we will explore different approaches to achieve this in ReactJS.

Using the window object

One way to get the viewport height in ReactJS is by using the window object. You can access the window object directly in your component and retrieve the height using the window.innerHeight property.

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

const MyComponent = () => {
  const [viewportHeight, setViewportHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleResize = () => {
      setViewportHeight(window.innerHeight);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    

      Viewport Height: {viewportHeight}px
    
  );
};

export default MyComponent;`}

In the above example, we use the useState hook to store the viewport height in the viewportHeight state variable. We also use the useEffect hook to add a resize event listener to the window object and update the state whenever the window is resized. Finally, we display the viewport height in the component’s render method.

Using the React Resize Observer

Another approach is to use a third-party library called react-resize-observer. This library provides a React component that can be used to observe changes in the size of an element.

{`import React, { useState } from 'react';
import { ResizeObserver } from 'react-resize-observer';

const MyComponent = () => {
  const [viewportHeight, setViewportHeight] = useState(0);

  const handleResize = (entry) => {
    setViewportHeight(entry.contentRect.height);
  };

  return (
    
      

        Viewport Height: {viewportHeight}px
      
    
  );
};

export default MyComponent;`}

In this example, we import the ResizeObserver component from the react-resize-observer package. We then use the component to wrap the element we want to observe for size changes. The onResize prop is used to specify a callback function that will be called whenever the size of the observed element changes. In the callback function, we update the viewportHeight state variable with the new height.

Conclusion

Getting the viewport or window height in ReactJS can be achieved using either the window object or a third-party library like react-resize-observer. Both approaches provide a way to dynamically retrieve the height and use it for various purposes in your ReactJS components.

Remember to choose the approach that best suits your specific use case and project requirements. Happy coding!