Nightclub Party Music

    svelte-screen-wake-lock
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    Svelte Screen Wake Lock API

    This headless component allows you to use the Screen Wake Lock API to progressively enhance your PWA. Using the Screen Wake Lock API allows you to keep the display from dimming and shutting down, if both the browser as well as the OS allow it (e.g. user not in battery-save-mode).

    This package is part of a collection of PWA-related svelte-packages:

    Install

    npm i -D svelte-screen-wake-lock
    

    Usage

    Basic

    Simply import the component and mount it. Without any further configuration, the component will request to keep the screen on.

    <script lang="ts">
      import { ScreenWakeLock } from "svelte-screen-wake-lock";
    </script>
    
    <ScreenWakeLock />

    Un-/Mount effects

    You can disable both the automatic request on mount as well as release of the lock on unmount.

    <script lang="ts">
      import { ScreenWakeLock } from "svelte-screen-wake-lock";
    </script>
    
    <ScreenWakeLock lockOnMountDisabled unlockOnMountDisabled />

    Events

    You can also listen to dispatched events for the following use cases:

    Event Value Description
    on:change { released: boolean } Object w/ flag if the lock is released. false means it's not released, i.e. active.
    on:error Error Error event if somehting didn't work or the API isn't supported.
    <script lang="ts">
      import { ScreenWakeLock } from "svelte-screen-wake-lock";
    
      const onChange = (event) => {
        console.log("SWL change", event.detail);
      }
    
      const onError = (event) => {
        console.log("SWL error", event.detail);
      }
    </script>
    
    <ScreenWakeLock on:change={onChange} on:error={onError} />

    Instance access

    Finally, you can also directly access the instance and use the component's variables directly.

    <script lang="ts">
      import { ScreenWakeLock } from "svelte-screen-wake-lock";
    
      let ref;
    
      // Access the component's props.
      // ref. ...
    </script>
    
    <ScreenWakeLock bind:this={ref} />

    Svelte Development Help

    Install

    npm i svelte-screen-wake-lock

    DownloadsWeekly Downloads

    13

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    8.64 kB

    Total Files

    7

    Last publish

    Collaborators

    • flaming-codes