@nlabs/gothamjs/lib/utils/useBreakpoint.js

Platform

import { throttle } from "@nlabs/utils";
import { useEffect, useState } from "react";
const getCurrentBreakpoint = (setBreakpoint) => () => {
  const breakpoints = {
    values: {
      lg: 1200,
      md: 900,
      sm: 600,
      xl: 1536
    }
  };
  const { values: { lg, md, sm, xl } } = breakpoints;
  const { innerWidth } = window;
  if (innerWidth < sm) {
    setBreakpoint(0);
  } else if (innerWidth < md) {
    setBreakpoint(1);
  } else if (innerWidth < lg) {
    setBreakpoint(2);
  } else if (innerWidth < xl) {
    setBreakpoint(3);
  } else {
    setBreakpoint(4);
  }
};
const useBreakpoint = () => {
  const breakpointValues = ["xs", "sm", "md", "lg", "xl"];
  const [breakpoint, setBreakpoint] = useState(0);
  useEffect(() => {
    const onResizeBreakpoint = getCurrentBreakpoint(setBreakpoint);
    const onResize = throttle(onResizeBreakpoint, 100);
    onResizeBreakpoint();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return {
    at: (size) => size === breakpointValues[breakpoint],
    down: (size) => breakpointValues.indexOf(size) >= breakpoint,
    up: (size) => breakpointValues.indexOf(size) <= breakpoint,
    value: () => breakpointValues[breakpoint]
  };
};
export {
  useBreakpoint
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vc3JjL3V0aWxzL3VzZUJyZWFrcG9pbnQudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE4LVByZXNlbnQsIE5pdHJvZ2VuIExhYnMsIEluYy5cbiAqIENvcHlyaWdodHMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBMaWNlbnNlLiBTZWUgdGhlIGFjY29tcGFueWluZyBMSUNFTlNFIGZpbGUgZm9yIHRlcm1zLlxuICovXG5pbXBvcnQge3Rocm90dGxlfSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuaW1wb3J0IHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IGdldEN1cnJlbnRCcmVha3BvaW50ID0gKHNldEJyZWFrcG9pbnQpID0+ICgpOiB2b2lkID0+IHtcbiAgY29uc3QgYnJlYWtwb2ludHMgPSB7XG4gICAgdmFsdWVzOiB7XG4gICAgICBsZzogMTIwMCxcbiAgICAgIG1kOiA5MDAsXG4gICAgICBzbTogNjAwLFxuICAgICAgeGw6IDE1MzZcbiAgICB9XG4gIH07XG4gIGNvbnN0IHt2YWx1ZXM6IHtsZywgbWQsIHNtLCB4bH19ID0gYnJlYWtwb2ludHM7XG4gIGNvbnN0IHtpbm5lcldpZHRofSA9IHdpbmRvdztcblxuICBpZihpbm5lcldpZHRoIDwgc20pIHtcbiAgICBzZXRCcmVha3BvaW50KDApO1xuICB9IGVsc2UgaWYoaW5uZXJXaWR0aCA8IG1kKSB7XG4gICAgc2V0QnJlYWtwb2ludCgxKTtcbiAgfSBlbHNlIGlmKGlubmVyV2lkdGggPCBsZykge1xuICAgIHNldEJyZWFrcG9pbnQoMik7XG4gIH0gZWxzZSBpZihpbm5lcldpZHRoIDwgeGwpIHtcbiAgICBzZXRCcmVha3BvaW50KDMpO1xuICB9IGVsc2Uge1xuICAgIHNldEJyZWFrcG9pbnQoNCk7XG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCB1c2VCcmVha3BvaW50ID0gKCkgPT4ge1xuICBjb25zdCBicmVha3BvaW50VmFsdWVzID0gWyd4cycsICdzbScsICdtZCcsICdsZycsICd4bCddO1xuICBjb25zdCBbYnJlYWtwb2ludCwgc2V0QnJlYWtwb2ludF0gPSB1c2VTdGF0ZSgwKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IG9uUmVzaXplQnJlYWtwb2ludCA9IGdldEN1cnJlbnRCcmVha3BvaW50KHNldEJyZWFrcG9pbnQpO1xuICAgIGNvbnN0IG9uUmVzaXplID0gdGhyb3R0bGUob25SZXNpemVCcmVha3BvaW50LCAxMDApO1xuXG4gICAgLy8gSW5pdGFsIHNpemluZ1xuICAgIG9uUmVzaXplQnJlYWtwb2ludCgpO1xuXG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIG9uUmVzaXplKTtcblxuICAgIHJldHVybiAoKSA9PiB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgb25SZXNpemUpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIHtcbiAgICBhdDogKHNpemU6IHN0cmluZyk6IGJvb2xlYW4gPT4gc2l6ZSA9PT0gYnJlYWtwb2ludFZhbHVlc1ticmVha3BvaW50XSxcbiAgICBkb3duOiAoc2l6ZTogc3RyaW5nKTogYm9vbGVhbiA9PiBicmVha3BvaW50VmFsdWVzLmluZGV4T2Yoc2l6ZSkgPj0gYnJlYWtwb2ludCxcbiAgICB1cDogKHNpemU6IHN0cmluZyk6IGJvb2xlYW4gPT4gYnJlYWtwb2ludFZhbHVlcy5pbmRleE9mKHNpemUpIDw9IGJyZWFrcG9pbnQsXG4gICAgdmFsdWU6ICgpOiBzdHJpbmcgPT4gYnJlYWtwb2ludFZhbHVlc1ticmVha3BvaW50XVxuICB9O1xufTtcbiJdLAogICJtYXBwaW5ncyI6ICJBQUlBLFNBQVEsZ0JBQWU7QUFDdkIsU0FBUSxXQUFXLGdCQUFlO0FBRWxDLE1BQU0sdUJBQXVCLENBQUMsa0JBQWtCLE1BQVk7QUFDMUQsUUFBTSxjQUFjO0FBQUEsSUFDbEIsUUFBUTtBQUFBLE1BQ04sSUFBSTtBQUFBLE1BQ0osSUFBSTtBQUFBLE1BQ0osSUFBSTtBQUFBLE1BQ0osSUFBSTtBQUFBLElBQ047QUFBQSxFQUNGO0FBQ0EsUUFBTSxFQUFDLFFBQVEsRUFBQyxJQUFJLElBQUksSUFBSSxHQUFFLEVBQUMsSUFBSTtBQUNuQyxRQUFNLEVBQUMsV0FBVSxJQUFJO0FBRXJCLE1BQUcsYUFBYSxJQUFJO0FBQ2xCLGtCQUFjLENBQUM7QUFBQSxFQUNqQixXQUFVLGFBQWEsSUFBSTtBQUN6QixrQkFBYyxDQUFDO0FBQUEsRUFDakIsV0FBVSxhQUFhLElBQUk7QUFDekIsa0JBQWMsQ0FBQztBQUFBLEVBQ2pCLFdBQVUsYUFBYSxJQUFJO0FBQ3pCLGtCQUFjLENBQUM7QUFBQSxFQUNqQixPQUFPO0FBQ0wsa0JBQWMsQ0FBQztBQUFBLEVBQ2pCO0FBQ0Y7QUFFTyxNQUFNLGdCQUFnQixNQUFNO0FBQ2pDLFFBQU0sbUJBQW1CLENBQUMsTUFBTSxNQUFNLE1BQU0sTUFBTSxJQUFJO0FBQ3RELFFBQU0sQ0FBQyxZQUFZLGFBQWEsSUFBSSxTQUFTLENBQUM7QUFFOUMsWUFBVSxNQUFNO0FBQ2QsVUFBTSxxQkFBcUIscUJBQXFCLGFBQWE7QUFDN0QsVUFBTSxXQUFXLFNBQVMsb0JBQW9CLEdBQUc7QUFHakQsdUJBQW1CO0FBRW5CLFdBQU8saUJBQWlCLFVBQVUsUUFBUTtBQUUxQyxXQUFPLE1BQU0sT0FBTyxvQkFBb0IsVUFBVSxRQUFRO0FBQUEsRUFDNUQsR0FBRyxDQUFDLENBQUM7QUFFTCxTQUFPO0FBQUEsSUFDTCxJQUFJLENBQUMsU0FBMEIsU0FBUyxpQkFBaUIsVUFBVTtBQUFBLElBQ25FLE1BQU0sQ0FBQyxTQUEwQixpQkFBaUIsUUFBUSxJQUFJLEtBQUs7QUFBQSxJQUNuRSxJQUFJLENBQUMsU0FBMEIsaUJBQWlCLFFBQVEsSUFBSSxLQUFLO0FBQUEsSUFDakUsT0FBTyxNQUFjLGlCQUFpQixVQUFVO0FBQUEsRUFDbEQ7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K