Skip to main content

Fullscreen

The Fullscreen component allows turning any nested components into the fullscreen mode. It can wrap any widget or layout and provides both a default Fullscreen toggle button and ability to assign hotkeys.

Fullscreen

Initialization and installation​

To use the Fullscreen control:

  1. Import the component from the Core package:
import { Fullscreen } from "@svar-ui/react-core";
  1. Wrap any content inside the <Fullscreen> tag:
<Fullscreen>
  <div className="demo-content">
    Any content can be fullscreened.
  </div>
</Fullscreen>

Assigning hotkeys​

There is no hotkey by default. But you can use the hotkey property to assign any combination so that Fullscreen can be triggered using a keyboard shortcut.

import { Fullscreen } from "@svar-ui/react-core";

<Fullscreen hotkey="ctrl+shift+f">
  <div className="demo">Press CTRL + SHIFT + F to toggle fullscreen</div>
</Fullscreen>

Adding a custom toggle button​

Fullscreen has a default small toggle button that appears in the bottom-right corner. You can replace it with a custom one by passing a toggleButton render function prop. The function receives the following parameters:

  • onclick - a function to toggle fullscreen (call it to toggle)
  • inFullscreen - a boolean indicating if the content is currently fullscreen

Example:

import { Fullscreen } from "@svar-ui/react-core";

<Fullscreen
  toggleButton={(onclick, inFullscreen) => (
    <button onClick={onclick}>
      {inFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
    </button>
  )}
>
  <div>Some content</div>
</Fullscreen>

Notes:

  • The prop name toggleButton preserves the same API role as the Svelte named snippet toggleButton(...).
  • Event handler passed into the render function is used as a React onClick handler.

Multiple instances with the same hotkey​

You can have multiple Fullscreen instances using the same hotkey. When the hotkey is pressed, the currently focused instance toggles fullscreen.

import { Fullscreen, Button } from "@svar-ui/react-core";

{/* First instance */}
<Fullscreen hotkey="ctrl+shift+f">
  <div>
    <h3>Instance 1</h3>
    <p>Press Ctrl + Shift + F to toggle fullscreen</p>
    <Button>Button inside instance 1</Button>
  </div>
</Fullscreen>

{/* Second instance (same hotkey) */}
<Fullscreen hotkey="ctrl+shift+f">
  <div>
    <h3>Instance 2</h3>
    <p>Press Ctrl + Shift + F to toggle fullscreen</p>
    <Button>Button inside instance 2</Button>
  </div>
</Fullscreen>

Related sample: Fullscreen