Install

$ npm install @reacthooks.org/use-match-media

useMatchMedia

React (State and Effect) Hook to check any media matches.

This IS NOT JUST .matchMedia() though since we also provide easy to use built-in matches such as the following:

• useMatchMedia.prefersColorScheme() // returns 'light' or 'dark' (or null)

Synopsis

In your React component:

import useMatchMedia from "use-match-media";

function MediaMatchSmall() {
  const small = useMediaMatch("(max-width: 600px)")

  return <code>Small Device = { small }</code>
}

There is no need to subscribe or unsubscribe to a 'window.matchMedia()' MediaQueryList`` event since this hook does it for you.

.usePrefersColorScheme()

We provide a simple predefined way to obtain whether the user prefer the 'light' or 'dark' color scheme. If this isn't supported by the browser, then it'll always return null.

import useMatchMedia from "use-match-media";

function ColorScheme() {
  const scheme = useMediaMatch.usePrefersColorScheme()

  return <p>You prefer the <strong>{ scheme }</strong> color scheme.</p>
}

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)