# useFullscreen

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFullscreen
*Captured:* 2026-04-27T14:59:35.793Z

The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.

## useFullscreen

**Fullscreen on dedicated element**

### Example: Example 1

Fullscreen enabled: false

Is Fullscreen active: false

Request Fullscreen
Exit Fullscreen
Toggle Fullscreen

#### React (tsx)

```tsx
import useFullscreen from '@rio-cloud/rio-uikit/useFullscreen';

export default () => {
    const handleChange = (event: Event) => console.log(event);
    const handleError = (event: Event) => console.log(event);

    const { exitFullscreen, isEnabled, isFullscreen, requestFullscreen, toggleFullscreen } = useFullscreen({
        onChange: handleChange,
        onError: handleError,
    });

    return (
        <div>
            <div>
                Fullscreen enabled: <span>{`${isEnabled}`}</span>
            </div>
            <hr />
            <div>
                Is Fullscreen active: <span>{`${isFullscreen}`}</span>
            </div>
            <hr />
            <div className='btn-toolbar'>
                <div className='btn btn-default' onClick={requestFullscreen}>
                    Request Fullscreen
                </div>
                <div className='btn btn-default' onClick={exitFullscreen}>
                    Exit Fullscreen
                </div>
                <div className='btn btn-default' onClick={toggleFullscreen}>
                    Toggle Fullscreen
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div>Fullscreen enabled: <span>false</span>
    </div>
    <hr>
    <div>Is Fullscreen active: <span>false</span>
    </div>
    <hr>
    <div class="btn-toolbar">
        <div class="btn btn-default">Request Fullscreen</div>
        <div class="btn btn-default">Exit Fullscreen</div>
        <div class="btn btn-default">Toggle Fullscreen</div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| element | HTMLElement | — | The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the "requestFullscreen" function. |
| onChange | (callback: OnChangeEventCallback) => void | () => {} | Custom callback function for acting on the fullscreen change. |
| onError | (callback: EventCallback) => void | () => {} | Custom callback function for acting on an error when the fullscreen fails. |
| requestFullscreenOptions | { navigationUI?: string \| "auto" \| "hide" \| "show" } | {} | Define additional options for requesting the fullscreen. |

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| requestFullscreen | (targetElement: HTMLElement) => void | — | This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init. |
| exitFullscreen | Function | — | This function exits the fullscreen. |
| toggleFullscreen | Function | — | This function requests or exists the fullscreen depending on the fullscreen state. |
| isFullscreen | Boolean | — | Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element. |
| isEnabled | Boolean | — | Tells you if the browser allows the fullscreen mode. |

### Example: Example 2

Example - click on expand icon to use fullscreen

Sample content.
Here you can have arbitrary content like a map or charts etc.

#### React (tsx)

```tsx
import { useRef } from 'react';

import useFullscreen from '@rio-cloud/rio-uikit/useFullscreen';

import { dummyTextLong } from '../../../utils/data';

export default () => {
    const wrapperRef = useRef<HTMLDivElement>(null);

    const { toggleFullscreen, isFullscreen } = useFullscreen();

    return (
        <div className='example-wrapper bg-lighter display-grid' ref={wrapperRef}>
            <div className={`panel panel-default shadow-default ${isFullscreen ? 'margin-25' : ''}`}>
                <div className='panel-heading display-flex justify-content-between align-items-center'>
                    <div className='text-medium text-color-darker'>
                        Example - click on expand icon to use fullscreen
                    </div>
                    <div
                        className='text-color-gray text-size-16 cursor-pointer'
                        onClick={() => toggleFullscreen(wrapperRef.current)}
                    >
                        <span className='rioglyph rioglyph-fullscreen' />
                    </div>
                </div>
                <div className='panel-body'>
                    <p>
                        Sample content. <br />
                        Here you can have arbitrary content like a map or charts etc.
                    </p>
                    {isFullscreen && <p>{dummyTextLong}</p>}
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="example-wrapper bg-lighter display-grid">
    <div class="panel panel-default shadow-default ">
        <div class="panel-heading display-flex justify-content-between align-items-center">
            <div class="text-medium text-color-darker">Example - click on expand icon to use fullscreen</div>
            <div class="text-color-gray text-size-16 cursor-pointer">
                <span class="rioglyph rioglyph-fullscreen">
                </span>
            </div>
        </div>
        <div class="panel-body">
            <p>Sample content. <br>Here you can have arbitrary content like a map or charts etc.</p>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| element | HTMLElement | — | The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the "requestFullscreen" function. |
| onChange | (callback: OnChangeEventCallback) => void | () => {} | Custom callback function for acting on the fullscreen change. |
| onError | (callback: EventCallback) => void | () => {} | Custom callback function for acting on an error when the fullscreen fails. |
| requestFullscreenOptions | { navigationUI?: string \| "auto" \| "hide" \| "show" } | {} | Define additional options for requesting the fullscreen. |

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| requestFullscreen | (targetElement: HTMLElement) => void | — | This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init. |
| exitFullscreen | Function | — | This function exits the fullscreen. |
| toggleFullscreen | Function | — | This function requests or exists the fullscreen depending on the fullscreen state. |
| isFullscreen | Boolean | — | Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element. |
| isEnabled | Boolean | — | Tells you if the browser allows the fullscreen mode. |