A very simple Svelte action to make elements go fullscreen.
npm install @terrygonguet/svelte-fullscreen
<script>
import { useFullscreen } from "@terrygonguet/svelte-fullscreen"
const { fullscreen, enter, exit, toggle } = useFullscreen()
</script>
<svelte:window on:fullscreenchange={console.log} />
<!-- The <main> element will go fullscreen -->
<main use:fullscreen>
<button on:click={enter}>Go fullscreen</button>
<button on:click={exit}>Exit fullscreen</button>
<button on:click={toggle}>Toggle fullscreen</button>
</main>
<style>
main:fullscreen {
border: 2px solid red;
}
</style>
Call the useFullscreen
function in your component and use:
the fullscreen
property of the returned object on the element you want to go fullscreen. The enter
, exit
and toggle
functions do what their names imply and return a promise that completes when the process is done, same as the underlying Fullscreen API.
function useFullscreen
function useFullscreen(options?: FullscreenOptions): {
fullscreen: Action
enter(): Promise<void>
exit(): Promise<void>
toggle(): Promise<void>
}
type Fullscreenoptions
See details on MDN.