Skip to content

alemesa/react-use-window-size

Repository files navigation

react-use-window-size

All Contributors

Version MIT license Size

NPM

React Hook that uses the window size

Usage

npm i @alemesa/react-use-window-size

  • Example Codesanbox:

Edit react-use-window-size


  • Simple Example: Check Window Size
import React, { useRef, useEffect } from "react";
import useWindowSize from "@alemesa/react-use-window-size";

const Header = React.memo(() => {
  // Pass a reference to the custom hook
  // Set the debounce to 100ms - would be 250 by default
  const windowSize = useWindowSize(100);

  useEffect(() => {
    if (windowSize.innerWidth > 1000) {
      // Bigger than 1000px
      console.log("bigger than 1000px");
    }
  }, [windowSize]);

  return <h3>Example</h3>;
});

export default Header;

Contributors

Thanks goes to these wonderful people (emoji key):

Alejandro Mesa
Alejandro Mesa

🚇 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published