document useMatchMediaQuery hook

Author: mmalfertheiner

readme.md

@@ -12,6 +12,7 @@ This package includes different tools that support you with common tasks.
   - [useInterval](#useinterval)
   - [Async Data](#async-data)
   - [LocationProvider](#locationprovider)
+  - [useMatchMediaQuery](#usematchmediaquery)
 - [Build & Publish](#build--publish)
 - [Information](#information)
 
@@ -149,6 +150,20 @@ const MyComponent = () => {
 }
 ```
 
+### useMatchMediaQuery
+
+This hook is based on the `window.matchQuery` API and can be used to find out if a certain media query matches the current window.
+
+```tsx
+import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
+
+const TestComponent = () => {
+  const matches = useMatchMediaQuery('(min-width : 500px)')
+  if (matches) return <div>visible</div>
+  return null
+}
+```
+
 ## Build & Publish
 
 To publish the package commit all changes and push them to main. Then run one of the following commands locally:

src/index.ts

@@ -6,6 +6,7 @@ import {
   LocationContext,
   LocationContextValue,
 } from './location-provider/LocationProvider'
+import { useMatchMediaQuery } from './useMatchMediaQuery/useMatchMediaQuery'
 
 export {
   useInterval,
@@ -15,4 +16,5 @@ export {
   LocationProvider,
   LocationContext,
   LocationContextValue,
+  useMatchMediaQuery,
 }

src/useMatchMediaQuery/__test__/useMatchMediaQuery.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import isMatching from 'css-mediaquery'
 import { render, RenderResult } from '@testing-library/react'
-import useMatchMediaQuery from '../useMatchMediaQuery'
+import { useMatchMediaQuery } from '../useMatchMediaQuery'
 
 beforeEach(() => {
   // mock window.matchMedia (use 'css-mediaquery')

src/useMatchMediaQuery/useMatchMediaQuery.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export default function (query: string): boolean | undefined {
+function useMatchMediaQuery(query: string): boolean | undefined {
   if (typeof window !== 'object' || !window.matchMedia) return
 
   const [matches, setMatches] = useState(window.matchMedia(query).matches)
@@ -22,3 +22,5 @@ export default function (query: string): boolean | undefined {
 
   return matches
 }
+
+export { useMatchMediaQuery }