queenshow/src/components/responsiveObserve.ts

const responsiveMap: { [key: string]: string } = {
  xs: "(max-width: 575px)",
  sm: "(min-width: 576px)",
  md: "(min-width: 768px)",
  lg: "(min-width: 992px)",
  xl: "(min-width: 1200px)",
  xxl: "(min-width: 1600px)",
  xxxl: "(min-width: 2000px)",
};

export class responsiveObserve {
  matchHandlers = {} as { [key: string]: any };
  unregister() {
    Object.keys(responsiveMap).forEach((screen) => {
      const matchMediaQuery = responsiveMap[screen];
      const handler = this.matchHandlers[matchMediaQuery];
      if (handler) {
        handler.mql.removeEventListener("change", handler.listener);
      }
    });
    this.matchHandlers = {};
  }
  register(cb: any) {
    Object.keys(responsiveMap).forEach((screen) => {
      const matchMediaQuery = responsiveMap[screen];
      const listener = (e: MediaQueryListEvent) => {
        console.log(e);
        if (e.matches) {
          cb && cb(screen);
        }
      };
      const mql = window.matchMedia(matchMediaQuery);
      if (mql.matches) {
        cb && cb(screen);
      }
      this.matchHandlers[matchMediaQuery] = {
        mql: mql,
        listener: listener,
      };
      mql.addEventListener("change", listener);
    });
  }
}