fscreen

What is fscreen?

The fscreen npm package provides a simple and consistent API for working with the Fullscreen API across different browsers. It allows developers to easily request fullscreen mode, exit fullscreen mode, and handle fullscreen change events.

What are fscreen's main functionalities?

Request Fullscreen

This feature allows you to request fullscreen mode for a specific element. In this example, clicking anywhere on the document will request fullscreen mode for the entire document.

document.addEventListener('click', () => {
  fscreen.requestFullscreen(document.documentElement);
});

Exit Fullscreen

This feature allows you to exit fullscreen mode. In this example, pressing the 'Escape' key will exit fullscreen mode.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    fscreen.exitFullscreen();
  }
});

Fullscreen Change Event

This feature allows you to handle fullscreen change events. In this example, a message is logged to the console whenever the fullscreen mode is entered or exited.

fscreen.addEventListener('fullscreenchange', () => {
  if (fscreen.fullscreenElement) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
});

Other packages similar to fscreen

screenfull

Screenfull is a simple wrapper for the Fullscreen API that provides a more user-friendly API. It offers similar functionalities to fscreen, such as requesting and exiting fullscreen mode, and handling fullscreen change events. Screenfull also includes additional features like checking if fullscreen is supported and if an element is currently in fullscreen mode.

README

Fscreen - Fullscreen API

Demo website (demo code on the gh-pages branch)

---

Vendor agnostic access to the Fullscreen API. Build with the Fullscreen API as intended without worrying about vendor prefixes.

$ npm install --save fscreen

import fscreen from 'fscreen';

fscreen.fullscreenEnabled === true / false;
// boolean to tell if fullscreen mode is supported
// replacement for: document.fullscreenEnabled
// mapped to: document.vendorMappedFullscreenEnabled

fscreen.fullscreenElement === null / undefined / DOM Element;
// null if not in fullscreen mode, or the DOM element that's in fullscreen mode
// (if fullscreen is not supported by the device it will be undefined)
// replacement for: document.fullscreenElement
// mapped to: document.vendorMappedFullsceenElement
// note that fscreen.fullscreenElement uses a getter to retrieve the element
// each time the property is accessed.


fscreen.requestFullscreen(element);
// replacement for: element.requestFullscreen()
// mapped to: element.vendorMappedRequestFullscreen()

fscreen.requestFullscreenFunction(element);
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen

fscreen.exitFullscreen();
// replacement for: document.exitFullscreen()
// mapped to: document.vendorMappedExitFullscreen()
// note that fscreen.exitFullscreen is mapped to
// document.vendorMappedExitFullscreen - without calling the function


fscreen.onfullscreenchange = handler;
// replacement for: document.onfullscreenchange = handler
// mapped to: document.vendorMappedOnfullscreenchange = handler

fscreen.addEventListener('fullscreenchange', handler, options);
// replacement for: document.addEventListener('fullscreenchange', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenchange', handler, options)

fscreen.removeEventListener('fullscreenchange', handler, options);
// replacement for: document.removeEventListener('fullscreenchange', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenchange', handler, options)


fscreen.onfullscreenerror = handler;
// replacement for: document.onfullscreenerror = handler
// mapped to: document.vendorMappedOnfullscreenerror = handler

fscreen.addEventListener('fullscreenerror', handler, options);
// replacement for: document.addEventListener('fullscreenerror', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenerror', handler, options)

fscreen.removeEventListener('fullscreenerror', handler, options);
// replacement for: document.removeEventListener('fullscreenerror', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenerror', handler, options)


fscreen.fullscreenPseudoClass;
// returns: the vendorMapped fullscreen Pseudo Class
// i.e. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen
// Can be used to find any elements that are fullscreen using the vendorMapped Pseudo Class 
// e.g. document.querySelectorAll(fscreen.fullscreenPseudoClass).forEach(...);

Usage

Use it just like the spec API.

if (fscreen.fullscreenEnabled) {
 fscreen.addEventListener('fullscreenchange', handler, false);
 fscreen.requestFullscreen(element);
}

function handler() {
 if (fscreen.fullscreenElement !== null) {
   console.log('Entered fullscreen mode');
 } else {
   console.log('Exited fullscreen mode');
 }
}