# fscreen

> Vendor agnostic access to the fullscreen spec api

Latest version **1.2.0** (published 2021-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install fscreen
pnpm add fscreen
yarn add fscreen
bun add fscreen
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-02-11 |
| First published | 2017-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/fscreen) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 440 |
| Author | Rafael Pedicini |
| Maintainers | rafgraph |
| Keywords | fullscreen, browser |

## Links

- npm: https://www.npmjs.com/package/fscreen
- Repository: https://github.com/rafgraph/fscreen
- Homepage: https://github.com/rafgraph/fscreen#readme
- Issues: https://github.com/rafgraph/fscreen/issues
- npm.io page: https://npm.io/package/fscreen

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2021-02-11
- 1.1.0 — 2020-09-11
- 1.0.2 — 2017-08-14
- 1.0.1 — 2017-06-04
- 1.0.0 — 2017-04-29

## README

# Fscreen - Fullscreen API

[![npm](https://img.shields.io/npm/dm/fscreen?label=npm)](https://www.npmjs.com/package/fscreen)

[Demo website](https://fscreen.rafgraph.dev) (demo code on the [`gh-pages` branch](https://github.com/rafgraph/fscreen/tree/gh-pages))

---

Vendor agnostic access to the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). Build with the Fullscreen API as intended without worrying about vendor prefixes.

```shell
$ npm install --save fscreen
```

```javascript
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.

```javascript
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');
 }
}
```

---
_Source: https://npm.io/package/fscreen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._