### Angular Directive Example

Source: https://context7.com/sindresorhus/screenfull/llms.txt

An example of implementing a fullscreen toggle directive in Angular.

```APIDOC
## Angular Directive Example

### Description
An example of implementing a fullscreen toggle directive in Angular.

### Request Example
```typescript
import { Directive, HostListener } from '@angular/core';
import screenfull from 'screenfull';

@Directive({
  selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
  @HostListener('click')
  async onClick() {
    if (screenfull.isEnabled) {
      await screenfull.toggle();
    }
  }
}

// Usage in template:
// <button toggleFullscreen>Toggle Fullscreen</button>
```
```

--------------------------------

### Install Screenfull via NPM

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Command to install the screenfull package into your project using npm.

```sh
npm install screenfull
```

--------------------------------

### Complete Example with jQuery

Source: https://context7.com/sindresorhus/screenfull/llms.txt

A full implementation demonstrating all screenfull.js features working together with jQuery.

```APIDOC
## Complete Example with jQuery

### Description
A full implementation demonstrating all screenfull.js features working together with jQuery.

### Request Example
```javascript
import screenfull from 'screenfull';

$(function() {
  if (!screenfull.isEnabled) {
    $('#fullscreen-controls').hide();
    $('#status').text('Fullscreen not supported');
    return;
  }

  // Request fullscreen for container
  $('#request-btn').click(async () => {
    await screenfull.request($('#container')[0]);
    console.log('Browser entered fullscreen mode');
  });

  // Exit fullscreen
  $('#exit-btn').click(async () => {
    await screenfull.exit();
    console.log('Browser exited fullscreen mode');
  });

  // Toggle fullscreen
  $('#toggle-btn').click(async () => {
    await screenfull.toggle($('#container')[0]);
  });

  // Click image to toggle its fullscreen
  $('#hero-image').click(function() {
    screenfull.toggle(this);
  });

  // Listen for changes
  screenfull.on('change', () => {
    const element = screenfull.element;
    $('#status').text(`Fullscreen: ${screenfull.isFullscreen}`);

    if (element) {
      $('#element-info').text(`Element: ${element.localName}#${element.id || '(no id)'}`);
    }
  });
});
```
```

--------------------------------

### React Hook Example

Source: https://context7.com/sindresorhus/screenfull/llms.txt

A custom React hook for managing fullscreen functionality.

```APIDOC
## React Hook Example

### Description
A custom React hook for managing fullscreen functionality.

### Request Example
```javascript
import { useState, useEffect, useCallback } from 'react';
import screenfull from 'screenfull';

function useFullscreen(elementRef) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    if (!screenfull.isEnabled) return;

    const handleChange = () => {
      setIsFullscreen(screenfull.isFullscreen);
    };

    screenfull.on('change', handleChange);
    return () => screenfull.off('change', handleChange);
  }, []);

  const toggle = useCallback(async () => {
    if (screenfull.isEnabled) {
      await screenfull.toggle(elementRef?.current);
    }
  }, [elementRef]);

  return { isFullscreen, toggle, isEnabled: screenfull.isEnabled };
}

// Usage:
// const ref = useRef(null);
// const { isFullscreen, toggle, isEnabled } = useFullscreen(ref);
```
```

--------------------------------

### Initialize and Use screenfull.js with jQuery

Source: https://github.com/sindresorhus/screenfull/blob/main/index.html

This snippet demonstrates how to initialize screenfull.js and use its core functionalities like requesting fullscreen for a specific element, exiting fullscreen, and toggling fullscreen. It also shows how to check if fullscreen is supported and listen for fullscreen change events. This example relies on jQuery for DOM manipulation.

```javascript
import screenfull from './index.js';

$(function () {
  $('#supported').text(`Supported/allowed: ${screenfull.isEnabled}`);

  if (!screenfull.isEnabled) {
    return false;
  }

  $('#request').click(async () => {
    await screenfull.request($('#container')[0]);
    console.log('Browser entered fullscreen mode');
  });

  $('#exit').click(async () => {
    await screenfull.exit();
    console.log('Browser exited fullscreen mode');
  });

  $('#toggle').click(async () => {
    await screenfull.toggle($('#container')[0]);
    console.log(`Fullscreen mode: ${screenfull.isFullscreen ? 'enabled' : 'disabled'}`);
  });

  $('#request2').click(() => {
    screenfull.request();
  });

  $('#demo-img').click(() => {
    screenfull.toggle($('#demo-img')[0]);
  });

  function fullscreenchange() {
    const {element} = screenfull;
    $('#status').text(`Is fullscreen: ${screenfull.isFullscreen}`);

    if (element) {
      $('#element').text(`Element: ${element.localName}${element.id ? `#${element.id}` : ''}`);
    }

    if (!screenfull.isFullscreen) {
      $('#external-iframe').remove();
      document.body.style.overflow = 'auto';
    }
  }

  screenfull.on('change', fullscreenchange);

  // Set the initial values
  fullscreenchange();
});
```

--------------------------------

### Implement Fullscreen with jQuery

Source: https://context7.com/sindresorhus/screenfull/llms.txt

A complete implementation example showing how to bind fullscreen requests, exits, and toggles to jQuery event handlers, while updating UI status elements.

```javascript
import screenfull from 'screenfull';

$(function() {
  if (!screenfull.isEnabled) return;

  $('#request-btn').click(async () => {
    await screenfull.request($('#container')[0]);
  });

  $('#exit-btn').click(async () => {
    await screenfull.exit();
  });

  screenfull.on('change', () => {
    $('#status').text(`Fullscreen: ${screenfull.isFullscreen}`);
  });
});
```

--------------------------------

### Fullscreen Integration with jQuery

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Examples of using Screenfull with jQuery to toggle fullscreen on elements or images.

```javascript
import screenfull from 'screenfull';

const element = $('#target')[0];
$('#button').on('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request(element);
	}
});

$('img').on('click', event => {
	if (screenfull.isEnabled) {
		screenfull.toggle(event.target);
	}
});
```

--------------------------------

### Get Current Fullscreen Element

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Returns the DOM element that is currently in fullscreen mode. Returns `undefined` if no element is in fullscreen.

```javascript
screenfull.element
```

--------------------------------

### Handle Fullscreen with Vanilla JavaScript

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Shows the manual implementation required to handle browser-specific Fullscreen API prefixes without a library.

```javascript
document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullScreen) {
		element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
	}
}

if (document.fullscreenEnabled) {
	requestFullscreen(document.documentElement);
}
```

--------------------------------

### Fullscreen Element with Options

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Request fullscreen for a specific element while passing configuration options like hiding the navigation UI.

```javascript
import screenfull from 'screenfull';

const element = document.getElementById('target');

document.getElementById('button').addEventListener('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request(element, {navigationUI: 'hide'});
	}
});
```

--------------------------------

### Event Handling API

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Provides methods to listen for fullscreen change events and errors.

```APIDOC
## POST /on

### Description
Adds an event listener for fullscreen events.

### Method
POST

### Endpoint
`/on`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **event** (string) - Required - The event to listen for. Can be `'change'` or `'error'`.
- **callback** (function) - Required - The function to execute when the event occurs.

### Request Example
```json
{
  "event": "change",
  "callback": "() => console.log('Fullscreen changed')"
}
```

### Response
#### Success Response (200)
No specific response body, listener is registered.

#### Response Example
(No JSON response)

## POST /off

### Description
Removes a previously registered event listener.

### Method
POST

### Endpoint
`/off`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **event** (string) - Required - The event to remove the listener for (`'change'` or `'error'`).
- **callback** (function) - Required - The specific callback function to remove.

### Request Example
```json
{
  "event": "error",
  "callback": "myErrorHandlerFunction"
}
```

### Response
#### Success Response (200)
No specific response body, listener is removed.

#### Response Example
(No JSON response)
```

--------------------------------

### Listen for Fullscreen Events

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

How to attach listeners to detect changes in fullscreen state or handle errors during the request.

```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
	screenfull.on('change', () => {
		console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
	});
	screenfull.on('error', event => {
		console.error('Failed to enable fullscreen', event);
	});
}

screenfull.off('change', callback);
```

--------------------------------

### Manage Fullscreen Events with on and off

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Demonstrates how to attach and detach event listeners for fullscreen changes and errors using the on and off methods. This ensures proper state management when entering or exiting fullscreen mode.

```javascript
import screenfull from 'screenfull';

function handleFullscreenChange() {
  if (screenfull.isFullscreen) {
    console.log('Entered fullscreen');
    document.body.classList.add('is-fullscreen');
  } else {
    console.log('Exited fullscreen');
    document.body.classList.remove('is-fullscreen');
  }
}

function handleFullscreenError(event) {
  console.error('Fullscreen error:', event);
  alert('Failed to enter fullscreen mode');
}

if (screenfull.isEnabled) {
  screenfull.on('change', handleFullscreenChange);
  screenfull.on('error', handleFullscreenError);
}
```

--------------------------------

### Request Fullscreen Element

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Makes an element fullscreen. Accepts a DOM element and optional FullscreenOptions. Defaults to the `<html>` element. Returns a promise that resolves when the element enters fullscreen.

```javascript
screenfull.request(element, options?)
```

--------------------------------

### Fullscreen API Methods

Source: https://github.com/sindresorhus/screenfull/blob/main/index.html

This section details the primary methods provided by screenfull.js for interacting with the Fullscreen API.

```APIDOC
## screenfull.request()

### Description
Requests fullscreen mode for the entire document or a specific element.

### Method
`request([element])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
screenfull.request(); // Request fullscreen for the document
screenfull.request(document.getElementById('container')); // Request fullscreen for a specific element
```

### Response
#### Success Response (200)
N/A (This method does not return a value, but initiates an action).

#### Response Example
None

## screenfull.exit()

### Description
Exits fullscreen mode if currently in fullscreen.

### Method
`exit()`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
screenfull.exit();
```

### Response
#### Success Response (200)
N/A (This method does not return a value, but initiates an action).

#### Response Example
None

## screenfull.toggle()

### Description
Toggles fullscreen mode for the entire document or a specific element. If currently in fullscreen, it exits; otherwise, it requests fullscreen.

### Method
`toggle([element])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
screenfull.toggle(); // Toggle fullscreen for the document
screenfull.toggle(document.getElementById('demo-img')); // Toggle fullscreen for a specific element
```

### Response
#### Success Response (200)
N/A (This method does not return a value, but initiates an action).

#### Response Example
None
```

--------------------------------

### Fullscreen State Properties

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Provides properties to check the current fullscreen status and capabilities.

```APIDOC
## GET /isFullscreen

### Description
Returns a boolean indicating whether fullscreen mode is currently active.

### Method
GET

### Endpoint
`/isFullscreen`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **isFullscreen** (boolean) - `true` if fullscreen is active, `false` otherwise.

#### Response Example
```json
{
  "isFullscreen": true
}
```

## GET /element

### Description
Returns the DOM element currently in fullscreen mode, or `undefined` if not in fullscreen.

### Method
GET

### Endpoint
`/element`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **element** (HTMLElement | undefined) - The element in fullscreen, or `undefined`.

#### Response Example
```json
{
  "element": "<video id='myVideo'>...</video>"
}
```

## GET /isEnabled

### Description
Returns a boolean indicating whether the browser supports and allows entering fullscreen mode.

### Method
GET

### Endpoint
`/isEnabled`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **isEnabled** (boolean) - `true` if fullscreen is enabled, `false` otherwise.

#### Response Example
```json
{
  "isEnabled": true
}
```

## GET /raw

### Description
Exposes the raw browser fullscreen API properties used internally.

### Method
GET

### Endpoint
`/raw`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **raw** (object) - An object containing raw fullscreen API properties like `requestFullscreen`, `exitFullscreen`, etc.

#### Response Example
```json
{
  "raw": {
    "requestFullscreen": "function()",
    "exitFullscreen": "function()",
    "fullscreenElement": "null",
    "fullscreenEnabled": "true",
    "fullscreenchange": "fullscreenchange",
    "fullscreenerror": "fullscreenerror"
  }
}
```
```

--------------------------------

### Workaround for Navigating to New Page in Fullscreen

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Demonstrates a workaround using a seamless iframe to navigate to a new page while maintaining a fullscreen-like experience, as direct page navigation in fullscreen is restricted by browsers for security reasons.

```javascript
import screenfull from 'screenfull';

document.querySelector('#new-page-button').addEventListener(() => {
	const iframe = document.createElement('iframe')

	iframe.setAttribute('id', 'external-iframe');
	iframe.setAttribute('src', 'https://new-page-website.com');
	iframe.setAttribute('frameborder', 'no');
	iframe.style.position = 'absolute';
	iframe.style.top = '0';
	iframe.style.right = '0';
	iframe.style.bottom = '0';
	iframe.style.left = '0';
	iframe.style.width = '100%';
	iframe.style.height = '100%';

	document.body.prepend(iframe);
	document.body.style.overflow = 'hidden';
});
```

--------------------------------

### Request Fullscreen Mode

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Demonstrates how to check if fullscreen is enabled and request it for the page or a specific element using Screenfull.

```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
	screenfull.request();
}
```

--------------------------------

### Access Raw Browser API

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Demonstrates accessing the raw property to retrieve the underlying browser-prefixed fullscreen API methods, useful for debugging or advanced custom implementations.

```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
  console.log('Browser API methods:', screenfull.raw);
}
```

--------------------------------

### Fullscreen API Properties and Events

Source: https://github.com/sindresorhus/screenfull/blob/main/index.html

This section covers the properties and event listeners available in screenfull.js for monitoring fullscreen status.

```APIDOC
## screenfull.isEnabled

### Description
Returns a boolean indicating whether the Fullscreen API is supported and allowed in the current browser context.

### Method
`isEnabled` (property)

### Parameters
None

### Request Example
```javascript
console.log(`Fullscreen supported: ${screenfull.isEnabled}`);
```

### Response
#### Success Response (200)
- **isEnabled** (boolean) - `true` if supported, `false` otherwise.

#### Response Example
```json
{
  "isEnabled": true
}
```

## screenfull.isFullscreen

### Description
Returns a boolean indicating whether the page or an element is currently in fullscreen mode.

### Method
`isFullscreen` (property)

### Parameters
None

### Request Example
```javascript
console.log(`Currently fullscreen: ${screenfull.isFullscreen}`);
```

### Response
#### Success Response (200)
- **isFullscreen** (boolean) - `true` if in fullscreen, `false` otherwise.

#### Response Example
```json
{
  "isFullscreen": false
}
```

## screenfull.element

### Description
Returns the element that is currently in fullscreen mode, or `undefined` if not in fullscreen.

### Method
`element` (property)

### Parameters
None

### Request Example
```javascript
const currentElement = screenfull.element;
if (currentElement) {
  console.log(`Fullscreen element: ${currentElement.tagName}`);
}
```

### Response
#### Success Response (200)
- **element** (HTMLElement | undefined) - The fullscreen element or undefined.

#### Response Example
```json
{
  "element": "<div id=\"container\">
    ...</div>"
}
```

## screenfull.on('change', handler)

### Description
Listens for the `change` event, which is fired when the fullscreen state changes (entering or exiting fullscreen).

### Method
`on(event, handler)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
screenfull.on('change', () => {
  console.log('Fullscreen state changed!');
  console.log(`Is fullscreen: ${screenfull.isFullscreen}`);
  if (screenfull.element) {
    console.log(`Fullscreen element: ${screenfull.element.id}`);
  }
});
```

### Response
#### Success Response (200)
N/A (This method sets up an event listener).

#### Response Example
None

## screenfull.off('change', handler)

### Description
Removes a previously attached `change` event listener.

### Method
`off(event, handler)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const myHandler = () => { console.log('Fullscreen changed'); };
screenfull.on('change', myHandler);
// Later, to remove the listener:
screenfull.off('change', myHandler);
```

### Response
#### Success Response (200)
N/A (This method removes an event listener).

#### Response Example
None
```

--------------------------------

### Request Fullscreen Mode

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Uses the request method to bring a specific element or the entire document into fullscreen mode. It returns a promise and supports optional FullscreenOptions.

```javascript
import screenfull from 'screenfull';

// Fullscreen the entire page
document.getElementById('fullscreen-btn').addEventListener('click', async () => {
  if (screenfull.isEnabled) {
    await screenfull.request();
    console.log('Page is now fullscreen');
  }
});

// Fullscreen a specific element
const videoElement = document.getElementById('video-player');
document.getElementById('video-fullscreen-btn').addEventListener('click', async () => {
  if (screenfull.isEnabled) {
    await screenfull.request(videoElement);
    console.log('Video is now fullscreen');
  }
});

// Fullscreen with options
document.getElementById('immersive-btn').addEventListener('click', async () => {
  if (screenfull.isEnabled) {
    await screenfull.request(document.documentElement, { navigationUI: 'hide' });
    console.log('Entered immersive fullscreen mode');
  }
});
```

--------------------------------

### Shorthand Event Listeners: onchange() and onerror()

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Convenient aliases for adding 'change' and 'error' event listeners.

```APIDOC
## Shorthand Event Listeners: onchange() and onerror()

### Description
Convenient aliases for adding 'change' and 'error' event listeners.

### Method
`screenfull.onchange(callback)`: Alias for `screenfull.on('change', callback)`.
`screenfull.onerror(callback)`: Alias for `screenfull.on('error', callback)`.

### Parameters
#### Event Listeners
- **callback** (function) - Required - The function to execute when the event occurs.

### Request Example
```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
  screenfull.onchange(() => {
    console.log('Fullscreen changed:', screenfull.isFullscreen);
  });

  screenfull.onerror((event) => {
    console.error('Fullscreen error occurred:', event);
  });
}
```
```

--------------------------------

### Create Angular Fullscreen Directive

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Shows how to wrap Screenfull functionality into an Angular directive to easily toggle fullscreen mode on any DOM element via a click event.

```typescript
import { Directive, HostListener } from '@angular/core';
import screenfull from 'screenfull';

@Directive({
  selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
  @HostListener('click')
  async onClick() {
    if (screenfull.isEnabled) {
      await screenfull.toggle();
    }
  }
}
```

--------------------------------

### Check Fullscreen Status and Element

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Retrieves the current fullscreen state and identifies which element is currently in fullscreen mode.

```javascript
import screenfull from 'screenfull';

// Check status
function updateUI() {
  const statusText = screenfull.isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen';
  document.getElementById('fullscreen-btn').textContent = statusText;
}

// Get current element
function logCurrentFullscreenElement() {
  if (screenfull.isFullscreen) {
    const el = screenfull.element;
    console.log(`Fullscreen element: ${el.tagName}${el.id ? '#' + el.id : ''}`);
  } else {
    console.log('No element in fullscreen');
  }
}
```

--------------------------------

### Use Shorthand Event Listeners

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Utilizes the onchange and onerror shorthand methods to simplify event handling for fullscreen state updates and errors.

```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
  screenfull.onchange(() => {
    console.log('Fullscreen changed:', screenfull.isFullscreen);
  });

  screenfull.onerror((event) => {
    console.error('Fullscreen error occurred:', event);
  });
}
```

--------------------------------

### Fullscreen Toggle API

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Allows toggling fullscreen mode: requests fullscreen if not active, otherwise exits.

```APIDOC
## POST /toggle

### Description
Requests fullscreen if not active, otherwise exits.

### Method
POST

### Endpoint
`/toggle`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **element** (HTMLElement) - Optional - The DOM element to toggle fullscreen for. Defaults to `<html>`.
- **options** (FullscreenOptions) - Optional - Options for fullscreen request.

### Request Example
```json
{
  "element": "document.getElementById('myElement')"
}
```

### Response
#### Success Response (200)
- **promise** (Promise) - Resolves after the element enters or exits fullscreen.

#### Response Example
(Promise resolution, no direct JSON example)
```

--------------------------------

### Event Listeners: on() and off()

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Adds and removes event listeners for fullscreen changes and errors. Supported events are 'change' and 'error'.

```APIDOC
## Event Listeners: on() and off()

### Description
Adds and removes event listeners for fullscreen changes and errors. Supported events are 'change' and 'error'.

### Method
`screenfull.on(event, callback)`: Adds an event listener.
`screenfull.off(event, callback)`: Removes an event listener.

### Parameters
#### Event Listeners
- **event** (string) - Required - The event to listen for ('change' or 'error').
- **callback** (function) - Required - The function to execute when the event occurs.

### Request Example
```javascript
import screenfull from 'screenfull';

function handleFullscreenChange() {
  if (screenfull.isFullscreen) {
    console.log('Entered fullscreen');
    document.body.classList.add('is-fullscreen');
  } else {
    console.log('Exited fullscreen');
    document.body.classList.remove('is-fullscreen');
  }
}

function handleFullscreenError(event) {
  console.error('Fullscreen error:', event);
  alert('Failed to enter fullscreen mode');
}

if (screenfull.isEnabled) {
  // Add listeners
  screenfull.on('change', handleFullscreenChange);
  screenfull.on('error', handleFullscreenError);

  // Remove listeners when done
  // screenfull.off('change', handleFullscreenChange);
  // screenfull.off('error', handleFullscreenError);
}
```
```

--------------------------------

### Access Raw Fullscreen API Properties

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Exposes the raw, potentially prefixed, properties of the native Fullscreen API used internally by screenfull.js.

```javascript
screenfull.raw
```

--------------------------------

### Fullscreen Request API

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Provides methods to programmatically request and exit fullscreen mode for a specified DOM element.

```APIDOC
## POST /request

### Description
Makes an element fullscreen.

### Method
POST

### Endpoint
`/request`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **element** (HTMLElement) - Required - The DOM element to make fullscreen. Defaults to `<html>`.
- **options** (FullscreenOptions) - Optional - Options for fullscreen request.

### Request Example
```json
{
  "element": "document.getElementById('myVideo')",
  "options": {"navigationUI": "hide"}
}
```

### Response
#### Success Response (200)
- **promise** (Promise) - Resolves after the element enters fullscreen.

#### Response Example
(Promise resolution, no direct JSON example)

## POST /exit

### Description
Brings the user out of fullscreen mode.

### Method
POST

### Endpoint
`/exit`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **promise** (Promise) - Resolves after the element exits fullscreen.

#### Response Example
(Promise resolution, no direct JSON example)
```

--------------------------------

### Build React Fullscreen Hook

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Provides a custom React hook that manages fullscreen state and provides a toggle function, leveraging useEffect for lifecycle management of event listeners.

```javascript
import { useState, useEffect, useCallback } from 'react';
import screenfull from 'screenfull';

function useFullscreen(elementRef) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    if (!screenfull.isEnabled) return;
    const handleChange = () => setIsFullscreen(screenfull.isFullscreen);
    screenfull.on('change', handleChange);
    return () => screenfull.off('change', handleChange);
  }, []);

  const toggle = useCallback(async () => {
    if (screenfull.isEnabled) await screenfull.toggle(elementRef?.current);
  }, [elementRef]);

  return { isFullscreen, toggle, isEnabled: screenfull.isEnabled };
}
```

--------------------------------

### Toggle Fullscreen

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Requests fullscreen if not active, otherwise exits. Accepts a DOM element and optional FullscreenOptions. Returns a promise that resolves after the element enters/exits fullscreen.

```javascript
screenfull.toggle(element, options?)
```

--------------------------------

### Check Fullscreen Support with isEnabled

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Verifies if the browser supports the Fullscreen API and if the current context allows it. This is essential for ensuring the feature is available before attempting to trigger it.

```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
  console.log('Fullscreen is supported and allowed');
} else {
  console.log('Fullscreen is not supported or not allowed');
}
```

--------------------------------

### Exit Fullscreen

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Brings the user out of fullscreen mode. Returns a promise that resolves when the element exits fullscreen.

```javascript
screenfull.exit()
```

--------------------------------

### Toggle Fullscreen State

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Uses the toggle method to switch between fullscreen and windowed modes based on the current state. It accepts the same parameters as the request method.

```javascript
import screenfull from 'screenfull';

// Toggle fullscreen on image click
document.querySelectorAll('img').forEach(img => {
  img.addEventListener('click', async (event) => {
    if (screenfull.isEnabled) {
      await screenfull.toggle(event.target);
      console.log(`Fullscreen: ${screenfull.isFullscreen ? 'enabled' : 'disabled'}`);
    }
  });
});

// Toggle fullscreen for a container
const container = document.getElementById('app-container');
document.getElementById('toggle-btn').addEventListener('click', async () => {
  if (screenfull.isEnabled) {
    await screenfull.toggle(container);
  }
});
```

--------------------------------

### Fullscreen with Angular 2

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Implementation of a directive in Angular 2 to toggle fullscreen mode on click.

```typescript
import {Directive, HostListener} from '@angular/core';
import screenfull from 'screenfull';

@Directive({
	selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
	@HostListener('click') onClick() {
		if (screenfull.isEnabled) {
			screenfull.toggle();
		}
	}
}
```

--------------------------------

### Access Raw Browser API with raw

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Exposes the raw prefixed browser API properties used internally for advanced use cases or debugging.

```APIDOC
## Access Raw Browser API with raw

### Description
Exposes the raw prefixed browser API properties used internally for advanced use cases or debugging.

### Property
`screenfull.raw` (object) - An object containing the raw browser API properties.

### Response Example
```json
{
  "requestFullscreen": "requestFullscreen",
  "exitFullscreen": "exitFullscreen",
  "fullscreenElement": "fullscreenElement",
  "fullscreenEnabled": "fullscreenEnabled",
  "fullscreenchange": "fullscreenchange",
  "fullscreenerror": "fullscreenerror"
}
```

### Request Example
```javascript
import screenfull from 'screenfull';

if (screenfull.isEnabled) {
  console.log('Browser API methods:', screenfull.raw);
}
```
```

--------------------------------

### Exit Fullscreen Mode

Source: https://context7.com/sindresorhus/screenfull/llms.txt

Exits the current fullscreen state using the exit method. This returns a promise that resolves once the browser has successfully exited fullscreen.

```javascript
import screenfull from 'screenfull';

document.getElementById('exit-btn').addEventListener('click', async () => {
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    await screenfull.exit();
    console.log('Exited fullscreen mode');
  }
});
```

--------------------------------

### Add Fullscreen Event Listener

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Adds a listener for 'change' or 'error' events. 'change' is triggered when the browser switches in and out of fullscreen. 'error' is triggered when an error occurs.

```javascript
screenfull.on(event, function)
```

```javascript
screenfull.onchange(function)
```

```javascript
screenfull.onerror(function)
```

--------------------------------

### Check Fullscreen Status

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Provides boolean values to check the current state of fullscreen mode and its availability.

```javascript
screenfull.isFullscreen
```

```javascript
screenfull.isEnabled
```

--------------------------------

### Remove Fullscreen Event Listener

Source: https://github.com/sindresorhus/screenfull/blob/main/readme.md

Removes a previously registered event listener for fullscreen events.

```javascript
screenfull.off(event, function)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.