useResize
React (State and Effect) Hook to get your window size.
Synopsis
In your React component:
import useResize from "use-resize"
function SizeInfo() {
const size = useResize()
return <p>size = ({ size.width }, { size.height })</p>
}
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 : andychilton@gmail.com │
│ 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 : chilts@appsattic.com │
│ 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)