Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
fscreen
✓ import fscreen from 'fscreen';
✗ import { fscreen } from 'fscreen';
fscreen is exported as a default module. Using named imports like `{ fscreen }` will result in `undefined` or an error, as there is no named export for `fscreen`.
fscreen
✓ import fscreen from 'fscreen';
✗ const fscreen = require('fscreen');
While fscreen can be consumed in CommonJS, its primary usage is in modern browser environments where ES Modules are standard. Direct CommonJS `require` will import an object with a `default` property (`require('fscreen').default`). For Node.js, ensure your environment supports ESM or use dynamic import.
fscreen.addEventListener
✓ fscreen.addEventListener('fullscreenchange', handler, false);
✗ document.addEventListener('fullscreenchange', handler, false);
fscreen provides its own `addEventListener` and `removeEventListener` methods that automatically handle vendor prefixes for fullscreen events, replacing direct `document.addEventListener` calls for `fullscreenchange` and `fullscreenerror`.
This quickstart demonstrates how to check for Fullscreen API support, register for fullscreen change events, and request fullscreen mode for a specific element upon a user interaction, cleaning up when exiting.
import fscreen from 'fscreen';
const initFullscreen = () => {
if (fscreen.fullscreenEnabled) {
// Store a reference to the handler to remove it later if needed
const fullscreenChangeHandler = () => {
if (fscreen.fullscreenElement !== null) {
console.log('Entered fullscreen mode');
// Example: add a class to the body when in fullscreen
document.body.classList.add('is-fullscreen');
} else {
console.log('Exited fullscreen mode');
// Example: remove the class when exiting
document.body.classList.remove('is-fullscreen');
// Clean up the event listener if no longer needed
// fscreen.removeEventListener('fullscreenchange', fullscreenChangeHandler, false);
}
};
fscreen.addEventListener('fullscreenchange', fullscreenChangeHandler, false);
const myElement = document.getElementById('my-fullscreen-target');
const enterFullscreenButton = document.getElementById('enter-fullscreen-btn');
if (myElement && enterFullscreenButton) {
enterFullscreenButton.addEventListener('click', () => {
fscreen.requestFullscreen(myElement);
});
} else {
console.warn("Required elements (my-fullscreen-target or enter-fullscreen-btn) not found.");
}
} else {
console.log('Fullscreen API is not supported by this browser.');
const statusDiv = document.getElementById('fullscreen-status');
if (statusDiv) {
statusDiv.textContent = 'Fullscreen is not available.';
}
}
};
// Call initFullscreen after the DOM is loaded
document.addEventListener('DOMContentLoaded', initFullscreen);
// Example HTML for context:
// <div id="my-fullscreen-target" style="background: lightblue; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">Content</div>
// <button id="enter-fullscreen-btn">Enter Fullscreen</button>
// <div id="fullscreen-status"></div>
Errors
Common errors & fixes
Uncaught (in promise) DOMException: The request is not allowed by the user agent or the platform in the current context.
`fscreen.requestFullscreen()` was called without a direct user gesture.
fixTrigger `fscreen.requestFullscreen()` only from within an event handler directly tied to user interaction, such as a button's `click` event listener.
TypeError: Cannot read properties of null (reading 'requestFullscreen') or TypeError: element.requestFullscreen is not a function
The Fullscreen API (even with vendor prefixes) is not supported by the browser, or `fscreen` was not properly initialized/loaded.
fixVerify browser support by checking `fscreen.fullscreenEnabled` before attempting fullscreen operations. Ensure `fscreen` is correctly imported and available in the scope where it's being used.
Audit
Dependencies
No dependency data recorded yet.