How to use screenfull.js with React?

Import screenfull in a React component and call it within event handlers like onClick; for example, use screenfull.toggle() in a button click handler after checking screenfull.isEnabled. Remember to clean up event listeners in useEffect to prevent memory leaks.

Screenfull.js vs native Fullscreen API: which should I use?

Screenfull.js is better if you need cross-browser support and want to avoid vendor prefix code, saving development time. However, for projects targeting only modern browsers with consistent API support, the native API might be lighter and avoid an extra dependency.

Why isn't screenfull.js working on my iPhone?

Screenfull.js relies on the browser's Fullscreen API, which is not supported on iPhone Safari. This is a browser limitation, not a bug in the library, as explicitly stated in the documentation under support notes.

Can I use screenfull.js in an iframe?

Yes, but you must add allowfullscreen, webkitallowfullscreen, and mozallowfullscreen attributes to the iframe element, as mentioned in the .request() documentation. Without these, fullscreen requests will fail.

How to handle fullscreen errors with screenfull.js?

Use screenfull.on('error', callback) to listen for errors, such as when fullscreen is denied by the browser. In the callback, you can log the event or show a user alert to improve the experience.

Is screenfull.js still maintained since it's feature complete?

The library is feature complete, meaning no new features will be added, but it should still receive critical bug fixes if needed. It's stable for current use cases but won't adapt to future browser changes.

Open-Awesome

screenfull.js

MITHTMLv6.0.2

A lightweight JavaScript wrapper that simplifies cross-browser usage of the Fullscreen API.

Visit Website GitHub

7.2k stars684 forks0 contributors

What is screenfull.js?

Screenfull.js is a lightweight JavaScript library that provides a simple, cross-browser wrapper for the Fullscreen API. It solves the problem of browser inconsistencies and vendor prefixes when implementing fullscreen functionality, allowing developers to request fullscreen mode for any page element with clean, modern code.

Target Audience

Frontend developers who need to implement fullscreen functionality in web applications without dealing with browser-specific implementations and vendor prefixes.

Value Proposition

Developers choose Screenfull.js because it eliminates the need to write and maintain verbose compatibility code for the Fullscreen API across different browsers, providing a tiny, dependency-free solution that just works.

Overview

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

Use Cases

Best For

Implementing fullscreen image galleries or media viewers
Creating immersive web experiences like games or presentations
Building video players with custom fullscreen controls
Developing dashboard applications with fullscreen modes
Adding fullscreen functionality to data visualization components
Creating kiosk-style applications that need fullscreen capabilities

Not Ideal For

Mobile web applications targeting iPhone users (no browser support for fullscreen on iPhone)
Projects requiring fullscreen navigation between pages (browser security restrictions prevent this, workarounds are hacky)
Legacy systems or environments that cannot use ESM modules (requires transpilation or an older version)
Applications where all target browsers uniformly support the modern Fullscreen API (abstraction adds unnecessary overhead)

Pros & Cons

Pros

Cross-Browser Compatibility

Automatically handles vendor prefixes (webkit, moz) and implementation differences, eliminating the need to write verbose compatibility code, as shown in the vanilla JavaScript comparison.

Minimal Footprint

At only 0.7 kB gzipped with zero dependencies, it adds negligible overhead, making it ideal for performance-sensitive web applications.

Modern Promise-Based API

All asynchronous methods like request() and exit() return promises, enabling clean async/await usage and simplifying error handling in modern JavaScript.

Simple Event Handling

Provides intuitive .on() and .off() methods for listening to fullscreen change and error events, reducing boilerplate code compared to raw event listeners.

Cons

iPhone Incompatibility

Does not support fullscreen on iPhone due to browser limitations, which is a major drawback for mobile-first or cross-platform projects.

ESM-Only Distribution

Requires ESM module support, forcing developers to use transpilation or downgrade to version 5.2.0 for older environments, adding setup complexity.

Feature Complete Stagnation

Marked as feature complete with no new features accepted, which risks obsolescence if browser APIs evolve or new use cases emerge.

Frequently Asked Questions

Related Projects

SweetAlert

A beautiful replacement for JavaScript's "alert"

Stars22,308

Forks2,772

Last commit3 years ago

SweetAlert2

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦🇪🇺

Stars18,065

Forks1,636

Last commit3 days ago

Magnific-Popup

Light and responsive lightbox script with focus on performance.

Stars11,347

Forks3,386

Last commit1 year ago

fancyBox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Stars7,259

Forks1,754

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub