From 615d55bd818926d26d780027e9d9c3c5a6207d4d Mon Sep 17 00:00:00 2001
From: yummy-sk <kunshup2000@gmail.com>
Date: Fri, 16 Jan 2026 16:59:44 +0900
Subject: [PATCH 1/2] Add enabled flag to FullScreenHandle and corresponding
 tests

---
 src/index.test.tsx | 14 ++++++++++++++
 src/index.tsx      |  3 +++
 2 files changed, 17 insertions(+)

diff --git a/src/index.test.tsx b/src/index.test.tsx
index fd50bed..4148ca4 100644
--- a/src/index.test.tsx
+++ b/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(
diff --git a/src/index.tsx b/src/index.tsx
index 75285fd..5b811f9 100644
--- a/src/index.tsx
+++ b/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,

From eaac269560c35f52f361310998e54bea16ed76ce Mon Sep 17 00:00:00 2001
From: yummy-sk <kunshup2000@gmail.com>
Date: Fri, 16 Jan 2026 17:00:09 +0900
Subject: [PATCH 2/2] Update README to conditionally render fullscreen button
 based on browser support

---
 README.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 8cdd372..87ddd18 100644
--- a/README.md
+++ b/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.