Getting Viewport Height in React

In React applications, it’s often necessary to access the viewport or window height to implement responsive designs or dynamic layouts. This tutorial will cover how to get the viewport height in React using different approaches.

Using Window Object

The simplest way to get the viewport height is by accessing the window.innerHeight property. This method is straightforward and works well for most use cases.

const viewportHeight = window.innerHeight;

However, this approach has some limitations. For example, it doesn’t account for window resizing, which can cause issues in responsive designs.

Using React Hooks

To handle window resizing and make the code more reactive, you can use React Hooks. One common hook is useWindowDimensions, which returns the current window dimensions.

Here’s an example implementation of useWindowDimensions:

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

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

  return windowDimensions;
}

You can then use this hook in your components like this:

import useWindowDimensions from './useWindowDimensions';

const Component = () => {
  const { height, width } = useWindowDimensions();

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

This approach provides a more robust way to handle window resizing and ensures that your components are always aware of the current viewport dimensions.

Server-Side Rendering (SSR) Considerations

When using React with server-side rendering, it’s essential to consider the implications of accessing the window object. Since the window object is not available on the server, you need to add checks to ensure that your code works correctly in both environments.

Here’s an updated implementation of useWindowDimensions that accounts for SSR:

import { useState, useEffect } from 'react';

export default function useWindowDimensions() {
  const hasWindow = typeof window !== 'undefined';

  function getWindowDimensions() {
    const width = hasWindow ? window.innerWidth : null;
    const height = hasWindow ? window.innerHeight : null;
    return {
      width,
      height,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    if (hasWindow) {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }

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

  return windowDimensions;
}

By using this approach, you can ensure that your code works correctly in both client-side and server-side rendering scenarios.

Conclusion

Getting the viewport height in React is a common requirement for building responsive and dynamic layouts. By using the window.innerHeight property or implementing a custom hook like useWindowDimensions, you can access the current viewport dimensions and create more effective user interfaces. Remember to consider server-side rendering implications when accessing the window object to ensure that your code works correctly in all environments.