Breakpoints helper store

Sometimes it's useful to know about your current window breakpoint size to order to make any adjustments when browser window gets resized. Smelte comes with a helper store just for that.

For instance, navigation drawer on this page should hide programmatically after hitting small window size breakpoint.

    import breakpoints from "smelte/breakpoints";

    const bp = breakpoints();
    $: show = $bp !== "sm";

    {#if show}
      ...
    {/if}
  

breakpoints accepts one function argument which returns breakpoint name.

  function defaultCalc(width) {
    if (width > 1279) {
      return "xl";
    }
    if (width > 1023) {
      return "lg";
    }
    if (width > 767) {
      return "md";
    }
    return "sm";
  }