React hook example about breakpoint-helper HOT 6 CLOSED

Hello @merobal glad you like the library!

I wanted to port it to Typescript for some time now, but have not had time to get around to it yet (might still take a while, I am quite busy at the moment). In any case I will do it at some point and let you know.

It is also great to see the usage in React, I might just add that example to the docs. Are you using this with SSR? If you do, did you have any issues with it?

Two quick things regarding your example. There is no need to use { immediate: true } in listenAll as it is set by default. Also, and I only learned this recently (will have to update the docs), there there apparently is a preferred way to get values from the tailwind config (see https://tailwindcss.com/docs/configuration#referencing-in-java-script).

The result would be (types might need adjusting):

import { useCallback, useEffect, useState } from "react";
+import resolveConfig from 'tailwindcss/resolveConfig'

const breakpointHelper: any = require("breakpoint-helper").default;
const tailwindConfig: any = require("../../../tailwind.config.js");

-const instance = breakpointHelper(tailwindConfig.theme.screens);

+const fullConfig = resolveConfig(tailwindConfig)
+const instance = breakpointHelper(fullConfig.theme.screens);

const { listenAll } = instance;

export const useBreakpoint = () => {
  const [match, setMatch] = useState<string>();

  const callback = useCallback((bps: string[]) => {
    setMatch(bps[0]);
  }, []);

  useEffect(() => {
-    const listener = listenAll(callback, { immediate: true });
+    const listener = listenAll(callback);

    return () => listener.off();
  }, []);

  return match;
};

from breakpoint-helper.

Hey @merobal, thank you for your feedback, I released a fix. Please let me know if it works for you.

from breakpoint-helper.

Thanks for the suggestions!

We don't use SSR, it's a Laravel Mix project, so only client-side React.

Also in the Tailwind docs:

Note that this will transitively pull in a lot of our build-time dependencies, resulting in bigger bundle client-side size. To avoid this, we recommend using a tool like babel-plugin-preval to generate a static version of your configuration at build-time

I tried to setup babel-plugin-preval but I had no success in the Laravel Mix & TypeScript & React world. Then I realized we only use our custom colors and breakpoints defined in our config file, so it's enough to import that, which results smaller bundle size.

from breakpoint-helper.

Hi @merobal

Long time... I have rewritten the lib in Typescript. If you have a chance to check it out it would be great to know if it works well for you, it is my first time a publishing something on npm using Typescript.

I also added an simple example on usage with react. Will close this issue now. I you have any problems feel free to open a new issue.

from breakpoint-helper.

I tested it now, and got this error message:
import breakpointHelper from "breakpoint-helper"; =>
File /node_modules/breakpoint-helper/dist/breakpoint-helper.d.ts' is not a module.ts(2306)

from breakpoint-helper.

It works now!

from breakpoint-helper.