Make Your Elements Full With requestFullscreen
Tags: javascript, tutorial, beginners, css
Published: 2021-01-29 18:06:22

Let's put it out there. This isn't one you're going to need often. But, it's cool to know about. There are so many neat native APIs that we often never use or overlook.

I only looked this one up because of a tweet thread Kent started

{% twitter 1350081180327059460 %}

And the React hook `useFull` was born! 😅

__NOTE::__ Dev.to doesn't allow `fullscreen` permissions on iframes. That means to play with the demo requires, opening the demos up on CodePen 👍

{% codepen https://codepen.io/jh3y/pen/poEqyJE %}

A React hook for making an element fullscreen.

But, this made me take a closer look at the method `requestFullscreen` from the Element API.

* * *

For those in camp **TL;DR** , you can make an element fullscreen with `requestFullscreen`(There are [_prefixes_](https://developers.google.com/web/fundamentals/native-hardware/fullscreen)).

The request requires some form of user gesture. You can't request fullscreen without it.

Have a play with this demo!

{% codepen https://codepen.io/jh3y/pen/rNMgPxg %}

__NOTE::__ The <code>requestFullscreen</code> method has different prefixes. Of course it does! There's a neat script in [this article](https://developers.google.com/web/fundamentals/native-hardware/fullscreen)

You can also check out this screencast where I walk through the demo!

{% youtube JaawffuNywA %}

* * *

## Why?

True. It's not something you'll use often. A common use case? Displaying media, documents, etc. Think YouTube videos, etc.

## How?

It's as straightforward as

```
const makeFullscreen = () => {
  element.requestFullscreen()
}
```

That needs to happen as the result of a user gesture. You might make the request as a result of clicking a button for example.

```
BUTTON.addEventListener('click', makeFullscreen)
```

The cool thing is that you can make anything fullscreen. As long as it's not a `dialog`.

## Detect Changes

How do you detect when you're in fullscreen mode? The method returns a `Promise`. But, not in all browsers 🤦‍♂️

The most compatible way currently is to listen to a `fullscreenchange` event on the `document`. Then check for the existence of `document.fullscreenElement`.

```
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement)
    console.info('We are fullscreen!!!')
  else
    console.info('Do nothing...')
})
```

This gives you a neat hook to make changes to elements. You could apply different styles for example. In the React example above, I trigger an animation when the element goes into fullscreen mode. I do this by adding/removing a class on `fullscreenchange`.

## Leaving

When you want to get out of fullscreen mode

```
document.exitFullscreen()
```

## That's It!

That's all there is to it.

The fun thing here is, what could you make with it? What kinda experience could you offer up to people with it? Where does your imagination take you?

What other cool browser APIs are out there to play with?

For example, in this demo, particle animations happen upon button click. It's like a "mock" screensaver you could provide your users!

**NOTE::** There's a reason you can't create fullscreen screensavers that would show after some inactivity. One reason. Think of the popups!

{% codepen https://codepen.io/jh3y/pen/YzpzYaj %}

Stay awesome!