Skip to content

flaming-codes/svelte-idle-detection

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Svelte Idle Detection API

This library provides a readable Svelte store to use a PWA's access to the Idle Detection API, available on the window. It allows you to read certain state-values, defined by the API. As this API requires user permission, relevant helper functions are also included

Note: This feature is currently experimental and only supported in a subset of Chromium-browsers.

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

Install

npm i -D svelte-idle-detection

Usage

Basic

The following example shows a simple, complete usage of the idleDetectionStore. It reads the store's state as well as userState and screenState, which come from the API. All possible helper functions are implemented to show a common use case for this library.

<script lang="ts">
  import { idleDetectionStore as store } from "svelte-idle-detection";

  const {
    state,
    userState,
    screenState,
    requestPermission,
    requestPermissionAndStart,
    start,
    stop
  } = store;

  // Unsubscribe if the component unmounts.
  onDestroy(stop);
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
  <li>State: {$state}</li>
  <li>UserState: {$userState}</li>
  <li>ScreenState: {$screenState}</li>
</ul>

{#if $state === "init"}
  <button on:click={requestPermission}>Check permission</button>
  <button on:click={() => requestPermissionAndStart()}>Check permission & start</button>
{/if}

{#if $state === "not-permitted"}
  <span>Not permitted</span>
{/if}

{#if $state === "ready" || $state === "stopped"}
  <button on:click={() => start()}>Start</button>
{/if}

{#if $state === "started"}
  <button on:click={stop}>Stop</button>
{/if}

Derived

To subscribe to changes for only a specific selection of values, simply create a derived store.

<script lang="ts">
  import { idleDetectionStore } from 'svelte-battery-status';
  import { derived } from 'svelte/store';

  const state = derived(idleDetectionStore, ($store) => $store.state);
</script>

state: {$state}

API

Please see the types for an API-documentation.

Svelte Development Help