@alemesa/react-use-window-size

React Hook that uses the window size

Usage no npm install needed!

<script type="module">
  import alemesaReactUseWindowSize from 'https://cdn.skypack.dev/@alemesa/react-use-window-size';
</script>

README

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!