feat: add enabled property to FullScreenHandle

README.md

@@ -28,9 +28,11 @@ function App() {
 
   return (
     <div>
-      <button onClick={handle.enter}>
-        Enter fullscreen
-      </button>
+      {handle.enabled &&
+        <button onClick={handle.enter}>
+          Enter fullscreen
+        </button>
+      }
 
       <FullScreen handle={handle}>
         Any fullscreen content here
@@ -42,6 +44,8 @@ function App() {
 export default App;
 ```
 
+`handle.enabled` indicates whether the browser supports fullscreen. Use it to conditionally render fullscreen controls.
+
 When you have many elements you need one handle per element.
 ```jsx
 import React, {useCallback} from 'react';
@@ -107,6 +111,10 @@ interface FullScreenHandle {
   active: boolean;
   // Specifies if attached element is currently full screen.
 
+  enabled: boolean;
+  // Specifies if the browser supports full screen.
+  // Use this to show/hide full screen button.
+
   enter: () => Promise<void>;
   // Requests this element to go full screen.
 

src/index.test.tsx

@@ -52,6 +52,20 @@ describe('useFullScreenHandle', () => {
       expect(hook.result.current.active).toBe(false);
     });
 
+    describe('enabled flag', () => {
+      it('is true when fscreen.fullscreenEnabled is true', () => {
+        fscreen.fullscreenEnabled = true;
+        const { result } = renderHook(() => useFullScreenHandle());
+        expect(result.current.enabled).toBe(true);
+      });
+
+      it('is false when fscreen.fullscreenEnabled is false', () => {
+        fscreen.fullscreenEnabled = false;
+        const { result } = renderHook(() => useFullScreenHandle());
+        expect(result.current.enabled).toBe(false);
+      });
+    });
+
     it('listens to fullscreen change', () => {
       expect(fscreen.addEventListener).toHaveBeenCalledTimes(1);
       expect(fscreen.addEventListener).toHaveBeenCalledWith(

src/index.tsx

@@ -9,6 +9,7 @@ import fscreen from 'fscreen';
 
 export interface FullScreenHandle {
   active: boolean;
+  enabled: boolean;
   enter: () => Promise<void>;
   exit: () => Promise<void>;
   node: React.MutableRefObject<HTMLDivElement | null>;
@@ -24,6 +25,7 @@ export interface FullScreenProps {
 export function useFullScreenHandle(): FullScreenHandle {
   const [active, setActive] = useState<boolean>(false);
   const node = useRef<HTMLDivElement | null>(null);
+  const enabled = useMemo(() => fscreen.fullscreenEnabled, []);
 
   useEffect(() => {
     const handleChange = () => {
@@ -53,6 +55,7 @@ export function useFullScreenHandle(): FullScreenHandle {
   return useMemo(
     () => ({
       active,
+      enabled,
       enter,
       exit,
       node,