mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-09-13 20:39:54 +02:00
Initial support for mobile devices (#787)
* Initial support for mobile devices No editing yet, but UI looks nice and you can open the canvas menu * Add support for editing shape color, etc * Allow the mobile menus to cover the shape selector * Hopefully fix test error * Fix touch on canvas * Fix safe area handling & remove unused Island
This commit is contained in:
25
src/is-mobile.tsx
Normal file
25
src/is-mobile.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
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);
|
||||
}
|
Reference in New Issue
Block a user