breakpointer
Version:
a lightweight React library for real-time breakpoint detection. supports custom and default tailwind breakpoints.
534 lines (498 loc) • 17.2 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a2, b2) => {
for (var prop in b2 || (b2 = {}))
if (__hasOwnProp.call(b2, prop))
__defNormalProp(a2, prop, b2[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b2)) {
if (__propIsEnum.call(b2, prop))
__defNormalProp(a2, prop, b2[prop]);
}
return a2;
};
var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
// node_modules/goober/dist/goober.modern.js
var e = { data: "" };
var t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e;
var l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
var a = /\/\*[^]*?\*\/| +/g;
var n = /\n+/g;
var o = (e2, t2) => {
let r = "", l2 = "", a2 = "";
for (let n2 in e2) {
let c2 = e2[n2];
"@" == n2[0] ? "i" == n2[1] ? r = n2 + " " + c2 + ";" : l2 += "f" == n2[1] ? o(c2, n2) : n2 + "{" + o(c2, "k" == n2[1] ? "" : t2) + "}" : "object" == typeof c2 ? l2 += o(c2, t2 ? t2.replace(/([^,])+/g, (e3) => n2.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (t3) => /&/.test(t3) ? t3.replace(/&/g, e3) : e3 ? e3 + " " + t3 : t3)) : n2) : null != c2 && (n2 = /^--/.test(n2) ? n2 : n2.replace(/[A-Z]/g, "-$&").toLowerCase(), a2 += o.p ? o.p(n2, c2) : n2 + ":" + c2 + ";");
}
return r + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2;
};
var c = {};
var s = (e2) => {
if ("object" == typeof e2) {
let t2 = "";
for (let r in e2) t2 += r + s(e2[r]);
return t2;
}
return e2;
};
var i = (e2, t2, r, i2, p2) => {
let u2 = s(e2), d2 = c[u2] || (c[u2] = ((e3) => {
let t3 = 0, r2 = 11;
for (; t3 < e3.length; ) r2 = 101 * r2 + e3.charCodeAt(t3++) >>> 0;
return "go" + r2;
})(u2));
if (!c[d2]) {
let t3 = u2 !== e2 ? e2 : ((e3) => {
let t4, r2, o2 = [{}];
for (; t4 = l.exec(e3.replace(a, "")); ) t4[4] ? o2.shift() : t4[3] ? (r2 = t4[3].replace(n, " ").trim(), o2.unshift(o2[0][r2] = o2[0][r2] || {})) : o2[0][t4[1]] = t4[2].replace(n, " ").trim();
return o2[0];
})(e2);
c[d2] = o(p2 ? { ["@keyframes " + d2]: t3 } : t3, r ? "" : "." + d2);
}
let f2 = r && c.g ? c.g : null;
return r && (c.g = c[d2]), ((e3, t3, r2, l2) => {
l2 ? t3.data = t3.data.replace(l2, e3) : -1 === t3.data.indexOf(e3) && (t3.data = r2 ? e3 + t3.data : t3.data + e3);
})(c[d2], t2, i2, f2), d2;
};
var p = (e2, t2, r) => e2.reduce((e3, l2, a2) => {
let n2 = t2[a2];
if (n2 && n2.call) {
let e4 = n2(r), t3 = e4 && e4.props && e4.props.className || /^go/.test(e4) && e4;
n2 = t3 ? "." + t3 : e4 && "object" == typeof e4 ? e4.props ? "" : o(e4, "") : false === e4 ? "" : e4;
}
return e3 + l2 + (null == n2 ? "" : n2);
}, "");
function u(e2) {
let r = this || {}, l2 = e2.call ? e2(r.p) : e2;
return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r.p) : t2), {}) : l2, t(r.target), r.g, r.o, r.k);
}
var d;
var f;
var g;
var b = u.bind({ g: 1 });
var h = u.bind({ k: 1 });
function m(e2, t2, r, l2) {
o.p = t2, d = e2, f = r, g = l2;
}
function j(e2, t2) {
let r = this || {};
return function() {
let l2 = arguments;
function a2(n2, o2) {
let c2 = Object.assign({}, n2), s2 = c2.className || a2.className;
r.p = Object.assign({ theme: f && f() }, c2), r.o = / *go\d+/.test(s2), c2.className = u.apply(r, l2) + (s2 ? " " + s2 : ""), t2 && (c2.ref = o2);
let i2 = e2;
return e2[0] && (i2 = c2.as || e2, delete c2.as), g && i2[0] && g(c2), d(i2, c2);
}
return t2 ? t2(a2) : a2;
};
}
// src/components/index.ts
import { createElement as createElement3 } from "react";
// src/components/breakpointer.provider.tsx
import { useCallback, useEffect, useState as useState2 } from "react";
// src/core/utils.ts
function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func(args);
}, delay);
};
}
// src/contexts/breakPoint.context.tsx
import { createContext } from "react";
var BreakpointerContext = createContext({
currentWidth: window.innerWidth,
currentScreen: ""
});
var breakPoint_context_default = BreakpointerContext;
// src/core/constants/breakpoints.ts
var breakpointsConstants = {
sm: 640,
// large phones & small tablets
md: 768,
// Tablets
lg: 1024,
// Laptops & large tablets
xl: 1280,
// Desktop & large laptops
"2xl": 1536
// Wide screen & large desktops
};
// src/core/unit.parser.ts
var parseUnit = (obj) => {
let parsedObj = {};
for (let key in obj) {
switch (typeof obj[key]) {
case "number":
parsedObj[key] = obj[key];
break;
case "string":
parsedObj[key] = parseInt(obj[key]);
break;
}
}
return parsedObj;
};
// src/components/breakpointer.indicator.tsx
import { useMemo, useState } from "react";
// src/hooks/useBreakpointer.ts
import { useContext } from "react";
var useBreakpointer = () => {
const { currentWidth, currentScreen } = useContext(breakPoint_context_default);
return {
screen: currentScreen,
currentWidth
};
};
// node_modules/lucide-react/dist/esm/createLucideIcon.js
import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
// node_modules/lucide-react/dist/esm/shared/src/utils.js
var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
var mergeClasses = (...classes) => classes.filter((className, index, array) => {
return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
}).join(" ").trim();
// node_modules/lucide-react/dist/esm/Icon.js
import { forwardRef, createElement } from "react";
// node_modules/lucide-react/dist/esm/defaultAttributes.js
var defaultAttributes = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
// node_modules/lucide-react/dist/esm/Icon.js
var Icon = forwardRef(
(_a, ref) => {
var _b = _a, {
color = "currentColor",
size = 24,
strokeWidth = 2,
absoluteStrokeWidth,
className = "",
children,
iconNode
} = _b, rest = __objRest(_b, [
"color",
"size",
"strokeWidth",
"absoluteStrokeWidth",
"className",
"children",
"iconNode"
]);
return createElement(
"svg",
__spreadValues(__spreadProps(__spreadValues({
ref
}, defaultAttributes), {
width: size,
height: size,
stroke: color,
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
className: mergeClasses("lucide", className)
}), rest),
[
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
...Array.isArray(children) ? children : [children]
]
);
}
);
// node_modules/lucide-react/dist/esm/createLucideIcon.js
var createLucideIcon = (iconName, iconNode) => {
const Component = forwardRef2(
(_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return createElement2(Icon, __spreadValues({
ref,
iconNode,
className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
}, props));
}
);
Component.displayName = `${iconName}`;
return Component;
};
// node_modules/lucide-react/dist/esm/icons/laptop.js
var __iconNode = [
[
"path",
{
d: "M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16",
key: "tarvll"
}
]
];
var Laptop = createLucideIcon("Laptop", __iconNode);
// node_modules/lucide-react/dist/esm/icons/monitor.js
var __iconNode2 = [
["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
];
var Monitor = createLucideIcon("Monitor", __iconNode2);
// node_modules/lucide-react/dist/esm/icons/smartphone.js
var __iconNode3 = [
["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
["path", { d: "M12 18h.01", key: "mhygvu" }]
];
var Smartphone = createLucideIcon("Smartphone", __iconNode3);
// node_modules/lucide-react/dist/esm/icons/tablet-smartphone.js
var __iconNode4 = [
["rect", { width: "10", height: "14", x: "3", y: "8", rx: "2", key: "1vrsiq" }],
["path", { d: "M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4", key: "1j4zmg" }],
["path", { d: "M8 18h.01", key: "lrp35t" }]
];
var TabletSmartphone = createLucideIcon("TabletSmartphone", __iconNode4);
// node_modules/lucide-react/dist/esm/icons/tablet.js
var __iconNode5 = [
["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
["line", { x1: "12", x2: "12.01", y1: "18", y2: "18", key: "1dp563" }]
];
var Tablet = createLucideIcon("Tablet", __iconNode5);
// node_modules/lucide-react/dist/esm/icons/tv.js
var __iconNode6 = [
["rect", { width: "20", height: "15", x: "2", y: "7", rx: "2", ry: "2", key: "10ag99" }],
["polyline", { points: "17 2 12 7 7 2", key: "11pgbg" }]
];
var Tv = createLucideIcon("Tv", __iconNode6);
// src/components/breakpointer.indicator.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Wrapper = j("div")`
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color: rgb(15, 15, 15);
border-radius: 5%;
min-width: 60px;
color: white;
position: fixed;
bottom: 30px;
min-height: 60px;
z-index: 10000;
${({ position }) => position === "right" ? "right: 30px;" : "left: 30px;"}
`;
var Col1 = j("div")`
align-content: center;
justify-items: center;
padding-inline: 3px;
&:nth-child(odd){
align-content: center;
border-right: 1px solid gray;
}
`;
var Col2 = j("div")`
border-top: 1px solid gray;
grid-column: 1/3;
align-content: center;
justify-items: center;
`;
var breakpointIcons = {
"sm": TabletSmartphone,
"md": Tablet,
"lg": Laptop,
"xl": Monitor,
"2xl": Tv
};
var BreakpointerIndicator = (_a) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
var _a2, _b2, _c, _d, _e, _f, _g, _h;
const { currentWidth, screen } = useBreakpointer();
const [right, setRight] = useState(false);
const Icon2 = useMemo(() => {
if (screen in breakpointsConstants) {
return breakpointIcons[screen];
} else {
return Smartphone;
}
}, [screen]);
return /* @__PURE__ */ jsxs(
Wrapper,
{
position: right ? "right" : "left",
onMouseEnter: () => {
setRight((prev) => !prev);
},
className: [className, (_b2 = (_a2 = props.classNames) == null ? void 0 : _a2.wrapper) == null ? void 0 : _b2.join(" ")].join(" "),
children: [
/* @__PURE__ */ jsx(Col1, { className: (_d = (_c = props.classNames) == null ? void 0 : _c.iconWrapper) == null ? void 0 : _d.join(" "), children: /* @__PURE__ */ jsx(Icon2, { size: 20 }) }),
/* @__PURE__ */ jsx(Col1, { className: (_f = (_e = props.classNames) == null ? void 0 : _e.screen) == null ? void 0 : _f.join(" "), children: /* @__PURE__ */ jsx(
"b",
{
style: {
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap"
},
children: screen
}
) }),
/* @__PURE__ */ jsx(Col2, { className: (_h = (_g = props.classNames) == null ? void 0 : _g.currentWidth) == null ? void 0 : _h.join(" "), children: /* @__PURE__ */ jsxs("p", { style: { margin: 0 }, children: [
currentWidth,
/* @__PURE__ */ jsx("small", { children: "px" })
] }) })
]
}
);
};
// src/components/breakpointer.provider.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var BreakpointerProvider = ({
children,
breakpointsObj = {},
mode,
classNames
}) => {
const breakpoints = __spreadValues(__spreadValues({}, breakpointsConstants), parseUnit(breakpointsObj));
const [innerWidth, setInnerWidth] = useState2(window.innerWidth);
const [currentScreen, setCurrentScreen] = useState2(null);
const debouncedResizeHandler = useCallback(
debounce(() => {
setInnerWidth(window.innerWidth);
}, 50),
[]
);
const detectScreen = useCallback((width) => {
let curr = -Infinity;
let screen = null;
for (let key in breakpoints) {
const typedKey = key;
if (breakpoints[typedKey] <= width && breakpoints[typedKey] > curr) {
curr = breakpoints[typedKey];
screen = typedKey;
}
}
console.log(curr, screen);
return screen;
}, [breakpoints]);
useEffect(() => {
setCurrentScreen(detectScreen(innerWidth));
}, [innerWidth, detectScreen]);
useEffect(() => {
window.addEventListener("resize", debouncedResizeHandler);
setCurrentScreen(detectScreen(window.innerWidth));
return () => {
window.removeEventListener("resize", debouncedResizeHandler);
};
}, []);
return /* @__PURE__ */ jsxs2(breakPoint_context_default.Provider, { value: {
currentWidth: innerWidth,
currentScreen
}, children: [
mode === "development" ? /* @__PURE__ */ jsx2(BreakpointerIndicator, { classNames }) : null,
children
] });
};
// src/components/index.ts
m(createElement3);
export {
BreakpointerProvider,
useBreakpointer
};
/*! Bundled license information:
lucide-react/dist/esm/shared/src/utils.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/defaultAttributes.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/Icon.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/createLucideIcon.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/laptop.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/monitor.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/smartphone.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/tablet-smartphone.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/tablet.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/tv.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/lucide-react.js:
(**
* @license lucide-react v0.483.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
*/
//# sourceMappingURL=index.js.map