📱 Add useMediaQuery hook

README.md

@@ -51,6 +51,7 @@ yarn add use-custom-hooks
 - [usePrevious](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-useprevious)
 - [useDebounce](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usedebounce)
 - [useDarkMode](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usedarkmode)
+- [useMediaQuery](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usemediaquery)
 - [useGeoLocation](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usegeolocation)
 - [useLocalStorage](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-uselocalstorage)
 - [useMousePosition](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usemouseposition)
@@ -129,4 +130,4 @@ SOFTWARE.
 
 ## ✍🏻 Creator
 
-[Aromal Anil](https://aromalanil.me)
+[Aromal Anil](https://aromalanil.tech)

docs/README.md

@@ -3,6 +3,7 @@
 ## 📗 Index
 
 - [useLocalStorage](#-uselocalstorage)
+- [useMediaQuery](#-usemediaquery)
 - [useForm](#-useform)
 - [useStack](#-usestack)
 - [useQueue](#-usequeue)
@@ -53,6 +54,38 @@ const LocalValue = () => {
 
 </br>
 
+## 📱 useMediaQuery
+
+Custom hook which listens for a media query and updates the state when the query is active/inactive
+
+### Usage
+
+```jsx
+import React from "react";
+import { useMediaQuery } from "use-custom-hooks";
+
+const BottomNav = () => {
+  const isMobileDevice = useMediaQuery("(max-width:600px)");
+  /*
+   If isMobileDevice will be true when the screen size is less than
+   600px, and false otherwise
+  */
+
+  // Component will only be rendered in mobile devices
+  return isMobileDevice ? <div className="bottom-nav"></div> : null;
+};
+```
+
+### Parameters
+
+1. `mediaQuery` (_String_) : The media query to listen to.
+
+### Return value
+
+1. `isMediaQueryActive` (_any_) : A boolean state denoting if the media query is active or not
+
+</br>
+
 ## 📃 useForm
 
 Custom hook to create controlled form component.

hooks/useMediaQuery.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+/**
+ *
+ * A custom hook which takes a media query as the argument and returns a state
+ * which will be true when the media query is active and false when not
+ *
+ * @example
+ * const isMobile = useMediaQuery("(max-width:600px)");
+ *
+ * @returns {boolean} Is the media query active
+ */
+const useMediaQuery = (mediaQuery) => {
+  const [doesQueryMatch, setDoesQueryMatch] = useState(() => window.matchMedia(mediaQuery).matches);
+
+  useEffect(() => {
+    const mediaQueryChangeHandler = (e) => {
+      setDoesQueryMatch(e.matches);
+    };
+
+    // Adding event listener for media query change on component mount
+    window.matchMedia(mediaQuery).addEventListener('change', mediaQueryChangeHandler);
+
+    // Removing event listener component unmount
+    return () => {
+      window.matchMedia(mediaQuery).removeEventListener('change', mediaQueryChangeHandler);
+    };
+  }, []);
+
+  return doesQueryMatch;
+};
+
+export default useMediaQuery;

index.js

@@ -5,6 +5,7 @@ export { default as useToggle } from './hooks/useToggle';
 export { default as useDarkMode } from './hooks/useDarkMode';
 export { default as usePrevious } from './hooks/usePrevious';
 export { default as useDebounce } from './hooks/useDebounce';
+export { default as useMediaQuery } from './hooks/useMediaQuery';
 export { default as useGeoLocation } from './hooks/useGeoLocation';
 export { default as useLocalStorage } from './hooks/useLocalStorage';
 export { default as useMousePosition } from './hooks/useMousePosition';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {