Created
May 18, 2023 13:16
-
-
Save eldonwilliams/0ee96b961f615269b61c4de7b9c1026b to your computer and use it in GitHub Desktop.
A react hook to make a media query
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { DependencyList, useEffect, useState } from "react"; | |
| /** | |
| * Takes in the handler function, subscribes it to any functions you need, and then returns a cleanup function. | |
| */ | |
| export type eventSetup_fn = (handler: ()=>void) => (()=>void); // looks nasty cause react doesn't export Destructor type | |
| /** | |
| * Performs a media query and returns the result. | |
| * Event setup allows you to subscribe to any events that the media query may depend on, | |
| * return a cleanup fn from the event setup | |
| * deps is optional dependencies for the useEffect hook | |
| * @param query | |
| * @param eventSetup | |
| * @param deps | |
| * @returns | |
| */ | |
| export const useMediaQuery = ( | |
| query: Parameters<typeof window.matchMedia>[0], | |
| eventSetup: eventSetup_fn, | |
| deps: DependencyList = []) => { | |
| const [result, setResult] = useState<ReturnType<typeof window.matchMedia>>(); | |
| useEffect(() => { | |
| const handler = () => setResult(window.matchMedia(query)); | |
| if (result == undefined) handler(); | |
| return eventSetup(handler); | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [eventSetup, query, result, ...deps]); | |
| return result; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is free to use code, you may include it in a project. But I will not offer assistance for errors, and please keep in mind the
useEffect(...)is prone to loops.