Svelte: derived stores based on an arbitrary array of stores

Addie B — Wed, 15 Sep 2021 15:07:55 +0000

Say you have an array of stores, the length of which is not necessarily known. You want to create a derived store that updates its value when any of these array values changes. The derived store syntax is a bit obtuse on how this can be done, but it is possible. Here's an example:

import { writable } from "svelte/store"

const storeArray = [writable(1), writable(1), writable(1)]

const derivedStore = derived(storeArray, ([...arr]) => {
  // Do stuff with your array of stores
  // e.g., this code will set the derived store's value to true whenever all the stores are greater than 10:
  return arr.every(item => item > 10);
});

The ... spread syntax here allows any number of stores to be passed into the derived constructor's callback function.

A caveat - the derived store won't be notified if new items are added to the store array, or the array itself is redeclared. For that, you could consider making the array itself a store, and use set and update whenever you want to change it.

storeArray = writable(storeArray)
const derivedStore = derived(
  [storeArray, ...storeArray], 
  ([...arr]) => {
    // arr[0] is the array itself, and arr.slice(1) contains the contents
  }
);

A11y media queries via Svelte stores

Addie B — Fri, 10 Sep 2021 17:20:40 +0000

Svelte's readable stores provide a useful way to track the state of a media query in JS throughout your application, and update settings automatically when it changes.

Here's an example: we'll create a readable store called prefersReducedMotion whose value is tied to the state of the prefers-reduced-motion media query.

In store.js:

import { readable } from "svelte/store";

export const prefersReducedMotion = readable(true, set => {
  // No behavior unless we're in a browser.
  let stop = () => {};

  if (typeof window != "undefined") {
    let mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    // Define a function that sets the store to match the media query
    const setMatches = () => set(mediaQuery.matches);
    // Call it once now
    setMatches();
    // Call it on changes
    mediaQuery.addEventListener("change", setMatches);
    // Set the stop function which will be returned
    stop = () => mediaQuery.removeEventListener("change", setMatches);
  }
  return stop;
});

Now, in our Svelte components, we can import the store and reference it in markup using the reactive store syntax ($storeName), and our markup will update immediately when the setting changes.

In any .svelte file:

<script>
  import { prefersReducedMotion } from "/path/to/store"
</script>

{#if $prefersReducedMotion}
  <p>Reduce motion and animations please!</p>
{:else}
  <p>No need to reduce motion for me.</p>
{/if}

An example REPL can be found here.

DEV Community: Addie B

Svelte: derived stores based on an arbitrary array of stores

A11y media queries via Svelte stores