@koine/react 1.0.96 → 1.0.97

package/helpers/createUseMediaQueryWidth.js

@@ -1,5 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { isUndefined, getMediaQueryWidthResolvers, } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
 /**
  * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
  *
@@ -25,7 +26,7 @@ export function createUseMediaQueryWidth(customBreakpoints) {
         var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
         var _c = useState(isUndefined(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
-        useEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {
                 setMatches(event.matches);
@@ -52,9 +53,10 @@ export function createUseMediaQueryWidth(customBreakpoints) {
 export default createUseMediaQueryWidth;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
-// import { useState, useEffect, useMemo } from "react";
+// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
 // import { isBrowser, type Split } from "@koine/utils";
 // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
 // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
 // type Breakpoints = Record<Breakpoint, number>;
 // type MediaQuery =
@@ -149,7 +151,7 @@ export default createUseMediaQueryWidth;
 //     [query]
 //   );
 //   const [matches, setMatches] = useState(mq.matches);
-//   useEffect(() => {
+//   useIsomorphicLayoutEffect(() => {
 //     const mq = window.matchMedia(query);
 //     const handleChange = (event: MediaQueryListEvent) => {
 //       setMatches(event.matches);

package/hooks/useFixedOffset.js

@@ -1,6 +1,7 @@
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 import { injectCss, calculateFixedOffset, listenResize, $each, } from "@koine/dom";
 import { debounce } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 var observer;
 var inject = function (value) {
     injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
@@ -12,7 +13,7 @@ var inject = function (value) {
  */
 export function useFixedOffset() {
     var fixedOffset = useRef(0);
-    useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         var update = function () {
             var newFixedOffset = calculateFixedOffset();
             fixedOffset.current = newFixedOffset;

package/node/helpers/createUseMediaQueryWidth.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createUseMediaQueryWidth = void 0;
 var react_1 = require("react");
 var utils_1 = require("@koine/utils");
+var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
 /**
  * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
  *
@@ -28,7 +29,7 @@ function createUseMediaQueryWidth(customBreakpoints) {
         var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
         var _c = (0, react_1.useState)((0, utils_1.isUndefined)(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
-        (0, react_1.useEffect)(function () {
+        (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {
                 setMatches(event.matches);
@@ -56,9 +57,10 @@ exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
 exports.default = createUseMediaQueryWidth;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
-// import { useState, useEffect, useMemo } from "react";
+// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
 // import { isBrowser, type Split } from "@koine/utils";
 // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
 // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
 // type Breakpoints = Record<Breakpoint, number>;
 // type MediaQuery =
@@ -153,7 +155,7 @@ exports.default = createUseMediaQueryWidth;
 //     [query]
 //   );
 //   const [matches, setMatches] = useState(mq.matches);
-//   useEffect(() => {
+//   useIsomorphicLayoutEffect(() => {
 //     const mq = window.matchMedia(query);
 //     const handleChange = (event: MediaQueryListEvent) => {
 //       setMatches(event.matches);

package/node/hooks/useFixedOffset.js

@@ -4,6 +4,7 @@ exports.useFixedOffset = void 0;
 var react_1 = require("react");
 var dom_1 = require("@koine/dom");
 var utils_1 = require("@koine/utils");
+var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 var observer;
 var inject = function (value) {
     (0, dom_1.injectCss)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
@@ -15,7 +16,7 @@ var inject = function (value) {
  */
 function useFixedOffset() {
     var fixedOffset = (0, react_1.useRef)(0);
-    (0, react_1.useLayoutEffect)(function () {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
         var update = function () {
             var newFixedOffset = (0, dom_1.calculateFixedOffset)();
             fixedOffset.current = newFixedOffset;

package/package.json

@@ -8,7 +8,7 @@
     "framer-motion": "^7.5.3",
     "react": "^18.2.0",
     "@mui/base": "^5.0.0-alpha.101",
-    "@koine/utils": "1.0.96",
+    "@koine/utils": "1.0.97",
     "ts-debounce": "^4.0.0",
     "react-icons": "^4.4.0",
     "date-fns": "^2.29.3",
@@ -17,12 +17,12 @@
     "@tiptap/starter-kit": "^2.0.0-beta.199",
     "@kuus/yup": "^1.0.0-beta.4",
     "react-hook-form": "^7.37.0",
-    "@koine/dom": "1.0.96",
+    "@koine/dom": "1.0.97",
     "react-popper": "^2.3.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {},
-  "version": "1.0.96",
+  "version": "1.0.97",
   "module": "./index.js",
   "types": "./index.d.ts"
 }