@reacthooks.org/use-window-width
v1.0.8
Published
A React (State and Effect) Hook for subscribing to Window Resize events to retrieve the width of the window.
Downloads
8
Readme
Install
$ npm install @reacthooks.org/use-window-width
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-local-storage - gets and sets a key in window.localStorage
- use-form-validation - helps manage form values, validation, and errors
- use-watch-position - get the user's location using the Geolocation API
Author
$ npx chilts
╒════════════════════════════════════════════════════╕
│ │
│ Andrew Chilton (Personal) │
│ ------------------------- │
│ │
│ Email : [email protected] │
│ 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 : [email protected] │
│ 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)