[IMPL] useFullscreen hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useFullscreen/UseFullscreen.tsx

@@ -0,0 +1,21 @@
+import { useFullscreen } from "../../../../../../packages/react-tools/src";
+
+/**
+The component render a div with a label to indicate if it is in fullscreen mode or not and two button to enter and exit from fullscreen mode.
+ */
+export const UseFullscreen = () => {
+	const [isFullscreen, cbRef, enterFullscreen, exitFullscreen] = useFullscreen();
+	return (
+		<div ref={cbRef}>
+			<div style={{ marginBottom: 16 }}>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
+			<div>
+				<button type="button" onClick={()=>enterFullscreen()}>
+					enter Fullscreen
+				</button>
+				<button type="button" onClick={exitFullscreen} style={{ margin: '0 8px' }}>
+					exit Fullscreen
+				</button>
+			</div>
+		</div>
+	);
+}

apps/react-tools-demo/src/constants/components.ts

@@ -72,7 +72,8 @@ export const COMPONENTS = [
 			"useMediaQuery",
 			"useColorScheme",
 			"useTitle",
-			"useIdle"
+			"useIdle",
+			"useFullscreen"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useFullscreen.md

@@ -0,0 +1,52 @@
+# useFullscreen
+Hook to use [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
+
+## Usage
+
+```tsx
+export const UseFullscreen = () => {
+	const [isFullscreen, cbRef, enterFullscreen, exitFullscreen] = useFullscreen();
+	return (
+		<div ref={cbRef}>
+			<div style={{ marginBottom: 16 }}>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
+			<div>
+				<button type="button" onClick={()=>enterFullscreen()}>
+					enterFullscreen
+				</button>
+				<button type="button" onClick={exitFullscreen} style={{ margin: '0 8px' }}>
+					exitFullscreen
+				</button>
+			</div>
+		</div>
+	);
+}
+```
+
+> The component render a div with a label to indicate if it is in fullscreen mode or not and two button to enter and exit from fullscreen mode.
+
+
+## API
+
+```tsx
+useFullscreen <T extends Element>(onEnter?: () => void|Promise<void>, onChange?: (evt: Event) => void, onExit?: () => void|Promise<void>): [boolean, RefCallback<T>, (opts?: FullscreenOptions) => Promise<void>, () => Promise<void>] 
+```
+
+> ### Params
+>
+> - __onEnter?__: _()=>void|Promise<void>_  
+callback that will be executed before enter in fullscreen mode.
+> - __onChange?__: _(evt: Event)=>void_  
+callback that will be executed when target element fullscreen change.
+> - __onExit?__: _()=>void|Promise<void>_  
+callback that will be executed before exit from fullscreen mode.
+>
+
+> ### Returns
+>
+> __result__: array with: _isFullscreen_: boolean to indicate if there is fullscreen or not; _refCallback_: ref callback to be attached at target element; _enter_: function to enter in fullscreen mode; _exit_: function to exit from fullscreen mode.
+> - __Array__:  
+>     - _boolean_  
+>     - _RefCallback<T>_  
+>     - _(opts?: FullscreenOptions) => Promise<void>_  
+>     - _() => Promise<void>_  
+>

apps/react-tools-demo/src/markdown/useMeasure.md

@@ -7,12 +7,10 @@ Hook to  measure and track element's dimensions.
 export const UseMeasure = () => {
 	const [cbRef, state] = useMeasure<HTMLDivElement>();
 
-	return <div>
-		<p>Dimensions: {state.toString()}</p>
+	return <div style={{margin: '0 auto'}}>
+		<p>Dimensions: {JSON.stringify(state)}</p>
 		<br />
-		<div ref={cbRef} style={{width: 100, height: 100, resize: 'both', border: '1px solid lightblue'}}>
-
-		</div>
+		<div ref={cbRef} style={{margin:'0 auto', width: 100, height: 100, overflow: 'auto', resize: 'both', border: '1px solid lightblue'}}/>
 	</div>
 }
 ```

packages/react-tools/README.md

@@ -86,7 +86,7 @@
 	- [x] useColorScheme
 	- [x] useTitle (change document.title but also document.head.title nodeElement)
 	- [x] useIdle
-	- [ ] useFullscreen (check browser compatibility)
+	- [x] useFullscreen (check browser compatibility)
 	- [ ] useLanguage (?)
 	- [ ] useScreenShare
 	- [ ] useFetch (with suspense ???)

packages/react-tools/src/hooks/index.ts

@@ -53,4 +53,5 @@ export { useIntersectionObserver } from './useIntersectionObserver';
 export { useMutationObserver } from './useMutationObserver';
 export { useIdle } from './useIdle';
 export { useRaf } from './useRaf';
-export { useMeasure } from './useMeasure';
+export { useMeasure } from './useMeasure';
+export { useFullscreen } from './useFullscreen';

packages/react-tools/src/hooks/useFullscreen.ts

@@ -0,0 +1,68 @@
+import { RefCallback, useCallback, useMemo, useRef } from "react";
+import { useSyncExternalStore } from "."
+
+/**
+ * **`useFullscreen`**: Hook to use [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
+ * @param {()=>void|Promise<void>} [onEnter] - callback that will be executed before enter in fullscreen mode.
+ * @param {(evt: Event)=>void} [onChange] - callback that will be executed when target element fullscreen change.
+ * @param {()=>void|Promise<void>} [onExit] - callback that will be executed before exit from fullscreen mode.
+ * @returns {[boolean, RefCallback<T>, (opts?: FullscreenOptions) => Promise<void>, () => Promise<void>]} result - array with: _isFullscreen_: boolean to indicate if there is fullscreen or not; _refCallback_: ref callback to be attached at target element; _enter_: function to enter in fullscreen mode; _exit_: function to exit from fullscreen mode.
+ */
+export const useFullscreen = <T extends Element>(onEnter?: () => void|Promise<void>, onChange?: (evt: Event) => void, onExit?: () => void|Promise<void>): [boolean, RefCallback<T>, (opts?: FullscreenOptions) => Promise<void>, () => Promise<void>] => {
+	const notifRef = useRef<() => void>();
+	const nodeRef = useRef<T>();
+	const listener = useCallback((evt: Event) => {
+		onChange && onChange(evt);
+		notifRef.current && notifRef.current();
+	}, [onChange]);
+
+	const cbRef = useCallback((node: T) => {
+		if (node) {
+			nodeRef.current = node;
+			node.addEventListener("fullscreenchange", listener)
+			node.addEventListener("webkitfullscreenchange", listener)
+		} else {
+			nodeRef.current?.removeEventListener("fullscreenchange", listener)
+			nodeRef.current?.removeEventListener("webkitfullscreenchange", listener)
+			nodeRef.current = undefined;
+		}
+	}, [listener]);
+
+	const enter = useCallback(async (opts?: FullscreenOptions) => {
+		onEnter && await onEnter();
+		await (nodeRef.current?.requestFullscreen
+			? nodeRef.current?.requestFullscreen(opts)
+			: (nodeRef.current as null | (T & { webkitRequestFullScreen: (opts?: FullscreenOptions) => Promise<void> }))?.webkitRequestFullScreen(opts))
+	}, [onEnter]);
+
+	const exit = useCallback(async () => {
+		onExit && await onExit();
+		await document.exitFullscreen();
+	}, [onExit]);
+
+	const isFullscreen = useSyncExternalStore(
+		useCallback(notif => {
+			notifRef.current = notif;
+			return () => {
+				notifRef.current = undefined;
+			}
+		}, []),
+		useMemo(() => {
+			let isFullscreenCached = document.fullscreenElement ?? (document as typeof document & {webkitFullscreenElement: Element|null}).webkitFullscreenElement;
+			return () => {
+				const isFullscreenCurrent = document.fullscreenElement ?? (document as typeof document & { webkitFullscreenElement: Element | null }).webkitFullscreenElement;
+				if (isFullscreenCached !== isFullscreenCurrent) {
+					isFullscreenCached = isFullscreenCurrent;
+				}
+				return isFullscreenCached !== null;
+			}
+		}, [])
+	);
+
+	return [
+		isFullscreen,
+		cbRef,
+		enter,
+		exit
+	];
+}

packages/react-tools/src/index.ts

@@ -67,7 +67,8 @@ export {
 	useMutationObserver,
 	useIdle,
 	useRaf,
-	useMeasure
+	useMeasure,
+	useFullscreen
 } from './hooks'
 
 export {