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

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

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

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

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

  return windowDimensions;
}

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

  return (
    <div>
      <h2>Window Dimensions:</h2>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

export default App;

import { useState, useEffect } from 'react';

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

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

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

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

  return windowDimensions;
}

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

  return (
    <div>
      <h2>Window Dimensions:</h2>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

export default App;

The useWindowDimensions hook is a custom React hook that returns the current width and height of the window. The hook works by utilizing the useState and useEffect hooks from the React library.

First, it defines a function getWindowDimensions that returns an object containing the current width and height of the window. This function uses destructuring to extract the innerWidth and innerHeight properties from the window object and assign them to width and height respectively.

Then, the useWindowDimensions hook itself is defined. It calls useState and passes getWindowDimensions as the initial value to set the state. This initializes the state with the current window dimensions.

Next, useEffect is called to handle the side-effect of updating the window dimensions whenever the window is resized. It adds a resize event listener to the window object that calls the handleResize function. The handleResize function updates the state with the new window dimensions by calling setWindowDimensions with the result of getWindowDimensions.

Finally, the hook returns the windowDimensions state, which can be destructured in the component to extract width and height properties.

Write a custom hook that returns the width and height of the current window.

You do not need to edit the App component. Tests will be scoring only the useWindowDimensions hook.

Make use of the built-in useState and useEffect hooks to track the window dimensions and update them when the window is resized.

The useEffect hook should have an event listener to listen for a resize event and call the setWindowDimensions function to update the state with the new dimensions.

Remember to cleanup the event listener by returning a function from the useEffect hook that removes the listener, this helps prevent memory leaks in your application.

Write a custom hook useWindowDimensions that returns an object with two properties: the current width and height of the window. The hook should update the dimensions whenever the window is resized. Please see the example below for the required return object.

We have already written some starting code for you.

import { renderHook, act } from '@testing-library/react';
import { useWindowDimensions } from './App';

describe('App component tests', () => {
  beforeAll(() => {
    // Mock the window object so that we can control its size
    Object.defineProperty(window, 'innerWidth', { value: 500 });
    Object.defineProperty(window, 'innerHeight', { value: 800 });
  });

  afterAll(() => {
    // Reset the window object to its original state
    Object.defineProperty(window, 'innerWidth', { value: global.innerWidth });
    Object.defineProperty(window, 'innerHeight', { value: global.innerHeight });
  });

  test('Returns initial window dimensions', () => {
    const { result } = renderHook(() => useWindowDimensions());
    expect(result.current.width).toBe(500);
    expect(result.current.height).toBe(800);
  });

  test('Updates window dimensions on resize', () => {
    const { result } = renderHook(() => useWindowDimensions());

    // Change the window size
    act(() => {
      Object.defineProperty(window, 'innerWidth', { value: 600 });
      Object.defineProperty(window, 'innerHeight', { value: 900 });
      window.dispatchEvent(new Event('resize'));
    })

    expect(result.current.width).toBe(600);
    expect(result.current.height).toBe(900);
  });
});

reacterry

Challenges

Deep Dive

Quizzes

Community

Sign In

Sign Up

Terms of Service

Privacy Policy

End of the Internet

reacterry

Window Dimensions Hook

Directions

Example

Need some hints?