fullscreen indicator

src/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useAreas } from "./useAreas";
 export { default as useCanvas } from "./useCanvas";
+export { default as useFullscreen } from "./useFullscreen";
 export { default as useLayout } from "./useLayout";
 export { default as useNotes } from "./useNotes";
 export { default as useSaveState } from "./useSaveState";

src/hooks/useFullscreen.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { useEventListener } from "usehooks-ts";
+
+export default function useFullscreen() {
+  const [value, setValue] = useState(() => {
+    return document.fullscreenElement === document.documentElement;
+  });
+
+  function handleFullscreenChange() {
+    setValue(document.fullscreenElement === document.documentElement);
+  }
+
+  useEventListener("fullscreenchange", handleFullscreenChange, document);
+
+  return value;
+}