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 (
-
+ {handle.enabled &&
+
+ }
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;
// Requests this element to go full screen.
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;
exit: () => Promise;
node: React.MutableRefObject;
@@ -24,6 +25,7 @@ export interface FullScreenProps {
export function useFullScreenHandle(): FullScreenHandle {
const [active, setActive] = useState(false);
const node = useRef(null);
+ const enabled = useMemo(() => fscreen.fullscreenEnabled, []);
useEffect(() => {
const handleChange = () => {
@@ -53,6 +55,7 @@ export function useFullScreenHandle(): FullScreenHandle {
return useMemo(
() => ({
active,
+ enabled,
enter,
exit,
node,