You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
769 B
25 lines
769 B
import React, { useState, useEffect, useRef, useContext } from "react"; |
|
|
|
const context = React.createContext(false); |
|
|
|
export function IsMobileProvider({ children }: { children: React.ReactNode }) { |
|
const query = useRef<MediaQueryList>(); |
|
if (!query.current) { |
|
query.current = window.matchMedia( |
|
"(max-width: 600px), (max-height: 500px)", |
|
); |
|
} |
|
const [isMobile, setMobile] = useState(query.current.matches); |
|
|
|
useEffect(() => { |
|
const handler = () => setMobile(query.current!.matches); |
|
query.current!.addListener(handler); |
|
return () => query.current!.removeListener(handler); |
|
}, []); |
|
|
|
return <context.Provider value={isMobile}>{children}</context.Provider>; |
|
} |
|
|
|
export default function useIsMobile() { |
|
return useContext(context); |
|
}
|
|
|