everything-store

The Everything Store

a nice utils library of stores for the discerning Svelte developer.

• Breakpoint Store
• Generic Media Query
• Dark Mode store

All stores are SSR friendly for SvelteKit.

Breakpoint Store

Subscribe for Tailwind breakpoints:

• xs: window.matchMedia('(max-width: 639px)')
• sm: window.matchMedia('(min-width: 640px)')
• md: window.matchMedia('(min-width: 768px)')
• lg: window.matchMedia('(min-width: 1024px)')
• xl: window.matchMedia('(min-width: 1280px)')
• xxl: window.matchMedia('(min-width: 1536px)')

No customization for now, copy out the code if you must.

<script>
import {breakPointStore} from 'everything-store';
const bps = breakPointStore()
</script>

<h1>Breakpoint: {$bps}</h1>

Generic Media Query Store

Subscribe for true/false whenever a media query changes.

<script>
import {mediaQueryStore} from 'everything-store';

const isLandscape = mediaQueryStore('(orientation: landscape)');
const isDarkMode = mediaQueryStore('(prefers-color-scheme: dark)');
const lessMotion = mediaQueryStore('(prefers-reduced-motion)');
</script>

<h1>isLandscape: {$isLandscape}</h1>
<!-- etc -->

Thanks to @dimfeld for impl: https://svelte.dev/repl/0d5e9844f81b423386f405da3cb69087?version=3.46.2

Dark Mode Custom Store

This store reads, in order:

• your previous dark mode setting from localStorage (using a customizable key that defaults to darkModeStore)
• dark mode preference from prefers-color-scheme: dark

and saves any changes to your darkModeStore localStorage key.

It also offers a custom method to toggleDark(). May take PRs to expand to support "system" and "custom" modes.

<script>
import {darkModeStore} from 'everything-store';

const darkModeState = darkModeStore()
</script>
<p>darkModeState: {$darkModeState}</p>
<p>toggle darkModeState: 
    <button on:click={() => darkModeState.toggleDark()}>
        toggle darkmodestate
    </button>
</p>

Other Great stores

• Kev’s list of custom stores
  • Toggle Store
  • Fetch Store
  • LocalStorage Store
    • Jacob Babich NPM package is neat!
  • Notification Toast Store
    • Shout out to Antony and Li Hau!
  • Form Validation Store
  • Periodic Fetch Store
• Brittney’s list of Stores
  • https://www.youtube.com/watch?v=a65aPLz18IM

Contributing

• git clone this repo
• then yarn to install packages (also uses prepare script to run a build)
• yarn start -> should open demo at localhost:3000

When updating code yarn build the code first, then yarn start.

When publishing:

• cd packages/everything-store
• npm version patch to bump versions
• npm publish to publish (also uses prepare script to run a build and prepublishOnly to copy the readme)