Doesn't run on initial render

[jelizarovas]

import create from "@kodingdotninja/use-tailwind-breakpoint";

export const { useBreakpoint } = create({
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
});

I'm importing into my React Component const isDesktop = useBreakpoint("md");

But on initial render if i console.log(isDesktop); it returns false. Only when i resize window it runs and returns true.

Am i doing something wrong, or that's how it's suppose to be?

[grikomsn]

Hi there, @jelizarovas! Current implementation for useBreakpoint defaults to false on this line: https://github.com/kodingdotninja/use-tailwind-breakpoint/blob/03694d0e38973494a5fe6e65c52c3897c943f602/src/index.ts#L94

I haven't updated useBreakpoint for quite some time and didn't handle many edge cases. You can submit a pull request if you'd like.

[jelizarovas]

it only adds a resize event listener, so it only runs track() when the window is resized, and doesn't run on initial render i mean doesn't return value of track() if window is not resized, right?

Griko Nibras — 01/26/2022 Good catch! I think we should run track() on first effect jelizarovas — 01/26/2022 i'm not too familiar with useIsomorphicEffect, if we just run it after window.add.... will it just run once on initial render or on every component rerender that uses useBreakpoint? Griko Nibras — 01/26/2022 I guess we could run track() once before registering the effect

[carlos-dubon]

Since the library is awaiting for a resize event just dispatch it inside a useEffect anywhere in your app.

import { useEffect } from "react";
import { useBreakpoint } from "hooks";

const MyComponent = () => {
  const tailwind_sm = useBreakpoint("sm");

  useEffect(() => {
    window.dispatchEvent(new Event("resize"));
  }, []);

  return <div>{tailwind_sm ? "sm" : "no sm"}</div>;
};

This will trigger the track function and fix the bug.

[ggluta]

I can confirm that an easy fix for this issue is @carlos-dubon's suggestion! Thx, mate! :raised_hands:

[jelizarovas]

It doesn't seem to work then setting initial state, so what i'm using:

const [open, setOpen] = React.useState(window.innerWidth > 500); //or any variable

and then in the app const isDesktop = useBreakpoint("md"); to keep track of changes

[Enkdress]

Hi mate, I ran into the same issue and I just add the track() before the window.addEventListener and it works beutifull 😄. I don't know if this could be bad for perfomance, but it worked for me.

[Xevion]

This is kind of a serious bug, to be honest; while there is a somewhat decent fix, I believe this should be integrated into the library rather than waiting for people to discover it for themselves.

[mikewheaton]

If you have many components using this, you might want to use the workaround from @carlos-dubon in your own custom hook. Here's how I implemented that:

import create from "@kodingdotninja/use-tailwind-breakpoint";
import { useEffect } from "react";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../../tailwind.config.js";

const config = resolveConfig(tailwindConfig);

const { useBreakpoint: useBreakpointOriginal } = create(config.theme?.screens);

export const useBreakpoint = (
  breakpoint: "sm" | "md" | "lg" | "xl" | "2xl"
) => {
  const isBreakpointOrLarger = useBreakpointOriginal(breakpoint);

  // Workaround for a bug with the use-tailwind-breakpoint library. See:
  // https://github.com/kodingdotninja/use-tailwind-breakpoint/issues/2#issuecomment-1030703188
  useEffect(() => {
    window.dispatchEvent(new Event("resize"));
  }, []);

  return isBreakpointOrLarger;
};

[jelizarovas]

Well it seems that tthere is already a Pull request pending, just need to be merged. @grikomsn is it possible?

[callum-gander]

This is kind of a serious bug, to be honest; while there is a somewhat decent fix, I believe this should be integrated into the library rather than waiting for people to discover it for themselves.

Agreed, I just started using this and presumed it was due to something on my end, not a problem with the library. @mikewheaton code has fixed the issue but that pull request should really be merged to ensure new users don't encounter this issue, it's a great library

[grikomsn]

Hello everyone! 👋🏻

Super apologies for the years of inactivity. Few years passed that I got married and have a kid which I didn't have that much time to properly commit doing open source stuff.

I just released v1.0.0 which would fix this issue, let me know if there are any issues.

cc @jelizarovas @carlos-dubon @ggluta @Enkdress @Xevion @mikewheaton @callum-gander