Smelte logo
SMELTE
Github Smelte

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";
  }