nicolas-cusan / breakpoint-helper Goto Github PK

It'd be really useful to be able to do something like atLeast('lg') or atMost('md').

This is an idea I took from the Foundation media query JS utility supports this, and BreakJS too.

We can do this already by passing a min and max range to isMatching, e.g. atLeast('lg') could be expressed as isMatching('lg', 'xxl') but then if I ever added a xxxl breakpoint I would have to go back and edit all the instances of isMatching('lg', 'xxl') to be isMatching('lg', 'xxxl') instead.

https://nicolas-cusan.github.io/breakpoint-helper/#initialize-with-javascript-object

Hi,

I checked the types and noticed the return type (Methods) is too general.

Which results that listenAll being just a Function,

Therefore the listener variable becomes any, also there are no arg types for the listenAll function.

(I would suggest removing the Methods interface as the return type of the bph fn and letting the TypeScript compiler figure out the exact interfaces of the returned fns.)

function bph(config: Config): {
    getBreakpoints: () => Breakpoints;
    getMediaQuery: (name: BpNameOrNames, useMax?: boolean) => string;
    isMatching: (name: BpNameOrNames, useMax?: boolean) => boolean;
    listen: (options: ListenOptions, callback: (event: MediaQueryListEvent | MediaQueryList) => void) => ListenersReturn;
    listenAll: (callback: (bps: string[]) => void, options?: ListenAllOptions) => ListenersReturn;
}

Hello, thx for your tool. It is really handy. But I have a problem when running the following code on my page.

const listener = listenAll(callback);

The error is window is not defined. I guess it is related to the react component life cycle. Do you have any idea how to fix?

Add Support for Tailwind raw media queries:

screens: {
  // ...
  h: { raw: '(hover: hover)' },
  // ...
}

TODO

• Implement
• Decide how to handle this type of query

Remove superfluous callback calls in the initial call of the listen method.

Probably solved using { immediate: false } option.

Thanks for this lib!

Just for the record, we use this small react hook, maybe useful for others as well.

(We use TypeScript, so we had to cast the tailwind config and this lib as any. If you have time please consider adding types support to the roadmap.)

import { useCallback, useEffect, useState } from "react";

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

const instance = breakpointHelper(tailwindConfig.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 });

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

  return match;
};

We found a bug which occurs on old safari (unfortunately few of our users use old version and don't want to upgrade...)

Tested via https://www.lambdatest.com/

The error in production: TypeError: n.addEventListener is not a function. (In 'n.addEventListener("change",t)', 'n.addEventListener' is undefined)

And the code context indicated that the source of the issue is this line:
https://github.com/nicolas-cusan/breakpoint-helper/blob/master/src/index.js#L192 (mq can be undefined.)

I put our listener = listenAll(callback); line inside a try-catch and our prod issue disappeared.

Can you please fix this issue (add an undefined check for mq would be enough for us) and release?