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.
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>
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
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 updates your <html> document with a dark class if warranted
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>- Kev’s list of custom stores
- Toggle Store
- Fetch Store
- LocalStorage Store
- Notification Toast Store
- Shout out to Antony and Li Hau!
- Form Validation Store
- Periodic Fetch Store
- Brittney’s list of Stores
git clonethis repo- then
yarnto install packages (also usespreparescript to run a build) yarn start-> should open demo atlocalhost:3000
When updating code yarn build the code first, then yarn start.
When publishing:
cd packages/everything-storenpm version patchto bump versionsnpm publishto publish (also usespreparescript to run a build andprepublishOnlyto copy the readme)