Skip to content

A simple hook for React to receive current window width using window.requestAnimationFrame for a better performance.

License

Notifications You must be signed in to change notification settings

dziksu/react-hook-use-window-width

Repository files navigation

React hook: useWindowWidth

A simple hook for React to receive current window width using ResizeObserver for a better performance.

Requirements

A minimal requirements to use the package:

{
  "react": ">=16.8"
}

Installation

Use the package manager yarn or npm to install react-hook-use-window-width.

npm install react-hook-use-window-width

or

yarn add react-hook-use-window-width

Usage

import React from 'react';
import useWindowWidth from 'react-hook-use-window-width';

const MyComponnet: React.FC = () => {
  const width = useWindowWidth();

  return (
    <div>
      Window width: <strong>{width}</strong>
    </div>
  );
};

RAW implementation

If you don't want to use the package, and you only need a simple hook implementation you can just copy and paste the current implementation from /src/index.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function useWindowWidth(): number {
  const isMounted = useRef<boolean>(true);
  const isSsr = typeof window === 'undefined';
  const [width, setWidth] = useState(isSsr ? 0 : window.innerWidth);

  const handleResize = useCallback(() => {
    if (isMounted.current) {
      setWidth(window.innerWidth);
    }
  }, [setWidth]);

  useEffect(() => {
    const observer = new ResizeObserver(handleResize);

    const element = window.document.querySelector('html');
    if(!element) return;
    observer.observe(element)

    return () => {
      isMounted.current = false;
      if(!element) return;
      observer.unobserve(element)
    };
  }, [handleResize]);

  return width;
}

export default useWindowWidth;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

About

A simple hook for React to receive current window width using window.requestAnimationFrame for a better performance.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published