is-mobile.tsx 1.0 KB

123456789101112131415161718192021222324252627282930313233343536
  1. import React, { useState, useEffect, useRef, useContext } from "react";
  2. const context = React.createContext(false);
  3. export const IsMobileProvider = ({
  4. children,
  5. }: {
  6. children: React.ReactNode;
  7. }) => {
  8. const query = useRef<MediaQueryList>();
  9. if (!query.current) {
  10. query.current = window.matchMedia
  11. ? window.matchMedia(
  12. // keep up to date with _variables.scss
  13. "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
  14. )
  15. : (({
  16. matches: false,
  17. addListener: () => {},
  18. removeListener: () => {},
  19. } as any) as MediaQueryList);
  20. }
  21. const [isMobile, setMobile] = useState(query.current.matches);
  22. useEffect(() => {
  23. const handler = () => setMobile(query.current!.matches);
  24. query.current!.addListener(handler);
  25. return () => query.current!.removeListener(handler);
  26. }, []);
  27. return <context.Provider value={isMobile}>{children}</context.Provider>;
  28. };
  29. export default function useIsMobile() {
  30. return useContext(context);
  31. }