✴ Project Homepage : Documentation and Examples ✴

useWindowWidth

React (State and Effect) Hook to get your window width.

Synopsis

In your React component:

import useWindowWidth from "use-window-width";

function WidthInfo() {
  const width = useWindowWidth();

  return <code>width = { width }</code>
}

There is no need to subscribe or unsubscribe to the window 'resize' event since this hook does it for you.

Other Hooks

Please see all of the other reacthooks.org hooks:

• use-document-title - Change the document.title
• use-resize - Subscribe to Window 'resize' events and get the width and height
• use-window-width - Subscribe to Window 'resize' events and get the width
• use-online - Get online/offline status
• use-match-media - Get whether a media query is matched
  • .usePrefersColorScheme() - Get whether the user prefers the 'light' or 'dark' color scheme
• use-set-timeout - use and automatically clear a setTimeout()
• use-set-interval - use and automatically clear a setInterval()
• use-orientation-change - get Device Orientation updates
• use-session-storage - gets and sets a key in window.sessionStorage
• use-form-validation - helps manage form values, validation, and errors

Author

$ npx chilts

   ╒════════════════════════════════════════════════════╕
   │                                                    │
   │   Andrew Chilton (Personal)                        │
   │   -------------------------                        │
   │                                                    │
   │          Email : [e-mail]             │
   │            Web : https://chilts.org                │
   │        Twitter : https://twitter.com/andychilton   │
   │         GitHub : https://github.com/chilts         │
   │         GitLab : https://gitlab.org/chilts         │
   │                                                    │
   │   Apps Attic Ltd (My Company)                      │
   │   ---------------------------                      │
   │                                                    │
   │          Email : [e-mail]              │
   │            Web : https://appsattic.com             │
   │        Twitter : https://twitter.com/AppsAttic     │
   │         GitLab : https://gitlab.com/appsattic      │
   │                                                    │
   │   Node.js / npm                                    │
   │   -------------                                    │
   │                                                    │
   │        Profile : https://www.npmjs.com/~chilts     │
   │           Card : $ npx chilts                      │
   │                                                    │
   ╘════════════════════════════════════════════════════╛

(Ends)