@aliexme/react-utils 2.1.1 → 2.3.0

package/dist/components/Maybe/Maybe.d.ts

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
 export type MaybeProps = PropsWithChildren<{
     when: boolean;
-    component: ReactElement;
-    orElse?: ReactElement;
+    component: ReactElement<PropsWithChildren>;
+    orElse?: ReactElement<PropsWithChildren>;
 }>;
 export declare const Maybe: FC<MaybeProps>;

package/dist/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './usePrevious';
 export * from './useDerivedState';
 export * from './useEventListener';
 export * from './useWindowSize';
+export * from './useComponentSize';

package/dist/hooks/useComponentSize.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),p=require("./useValueRef.cjs"),d=e=>({width:(e==null?void 0:e.offsetWidth)??0,height:(e==null?void 0:e.offsetHeight)??0}),R=(e={})=>{const{ref:h,enabled:o=!0,manual:i=!1,onResize:z}=e,S=r.useRef(null),n=h??S,t=p.useValueRef(z),[u,a]=r.useState(()=>d(n.current)),c=r.useCallback(s=>{var l;const b=s[0],f=d(n.current);i||a(f),(l=t.current)==null||l.call(t,f,b)},[n,i,t]);return r.useEffect(()=>{if(typeof window>"u"||!o||!n.current)return;const s=new ResizeObserver(c);return s.observe(n.current),()=>{s.disconnect()}},[o,n,c]),{ref:n,width:u.width,height:u.height}};exports.useComponentSize=R;

package/dist/hooks/useComponentSize.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export interface ComponentSize {
+    width: number;
+    height: number;
+}
+export interface UseComponentSizeOptions<T extends HTMLElement = HTMLElement> {
+    ref?: RefObject<T>;
+    enabled?: boolean;
+    manual?: boolean;
+    onResize?(size: ComponentSize, entry: ResizeObserverEntry): void;
+}
+export declare const useComponentSize: <T extends HTMLElement = HTMLElement>(options?: UseComponentSizeOptions) => {
+    ref: RefObject<HTMLElement> | RefObject<T | null>;
+    width: number;
+    height: number;
+};

package/dist/hooks/useComponentSize.js

@@ -0,0 +1,30 @@
+import { useRef as w, useState as R, useCallback as b, useEffect as S } from "react";
+import { useValueRef as a } from "./useValueRef.js";
+const h = (e) => ({
+  width: (e == null ? void 0 : e.offsetWidth) ?? 0,
+  height: (e == null ? void 0 : e.offsetHeight) ?? 0
+}), C = (e = {}) => {
+  const { ref: d, enabled: s = !0, manual: o = !1, onResize: l } = e, p = w(null), n = d ?? p, t = a(l), [i, z] = R(() => h(n.current)), c = b(
+    (r) => {
+      var f;
+      const m = r[0], u = h(n.current);
+      o || z(u), (f = t.current) == null || f.call(t, u, m);
+    },
+    [n, o, t]
+  );
+  return S(() => {
+    if (typeof window > "u" || !s || !n.current)
+      return;
+    const r = new ResizeObserver(c);
+    return r.observe(n.current), () => {
+      r.disconnect();
+    };
+  }, [s, n, c]), {
+    ref: n,
+    width: i.width,
+    height: i.height
+  };
+};
+export {
+  C as useComponentSize
+};

package/dist/hooks/useIsMountedRef.d.ts

@@ -1 +1 @@
-export declare const useIsMountedRef: () => import('react').MutableRefObject<boolean>;
+export declare const useIsMountedRef: () => import('react').RefObject<boolean>;

package/dist/hooks/useValueRef.d.ts

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
-export declare const useValueRef: <T>(value: T) => MutableRefObject<T>;
+import { RefObject } from 'react';
+export declare const useValueRef: <T>(value: T) => RefObject<T>;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Maybe/Maybe.cjs"),u=require("./hooks/useIsomorphicLayoutEffect.cjs"),s=require("./hooks/useDidMount.cjs"),t=require("./hooks/useWillUnmount.cjs"),o=require("./hooks/useIsMounted.cjs"),i=require("./hooks/useIsMountedRef.cjs"),r=require("./hooks/useValueRef.cjs"),n=require("./hooks/usePrevious.cjs"),c=require("./hooks/useDerivedState.cjs"),d=require("./hooks/useEventListener.cjs"),a=require("./hooks/useWindowSize.cjs");exports.Maybe=e.Maybe;exports.useIsomorphicLayoutEffect=u.useIsomorphicLayoutEffect;exports.useDidMount=s.useDidMount;exports.useWillUnmount=t.useWillUnmount;exports.useIsMounted=o.useIsMounted;exports.useIsMountedRef=i.useIsMountedRef;exports.useValueRef=r.useValueRef;exports.usePrevious=n.usePrevious;exports.useDerivedState=c.useDerivedState;exports.useEventListener=d.useEventListener;exports.useWindowSize=a.useWindowSize;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Maybe/Maybe.cjs"),u=require("./hooks/useIsomorphicLayoutEffect.cjs"),s=require("./hooks/useDidMount.cjs"),t=require("./hooks/useWillUnmount.cjs"),o=require("./hooks/useIsMounted.cjs"),n=require("./hooks/useIsMountedRef.cjs"),i=require("./hooks/useValueRef.cjs"),r=require("./hooks/usePrevious.cjs"),c=require("./hooks/useDerivedState.cjs"),d=require("./hooks/useEventListener.cjs"),a=require("./hooks/useWindowSize.cjs"),f=require("./hooks/useComponentSize.cjs");exports.Maybe=e.Maybe;exports.useIsomorphicLayoutEffect=u.useIsomorphicLayoutEffect;exports.useDidMount=s.useDidMount;exports.useWillUnmount=t.useWillUnmount;exports.useIsMounted=o.useIsMounted;exports.useIsMountedRef=n.useIsMountedRef;exports.useValueRef=i.useValueRef;exports.usePrevious=r.usePrevious;exports.useDerivedState=c.useDerivedState;exports.useEventListener=d.useEventListener;exports.useWindowSize=a.useWindowSize;exports.useComponentSize=f.useComponentSize;

package/dist/index.js

@@ -2,23 +2,25 @@ import { Maybe as r } from "./components/Maybe/Maybe.js";
 import { useIsomorphicLayoutEffect as u } from "./hooks/useIsomorphicLayoutEffect.js";
 import { useDidMount as s } from "./hooks/useDidMount.js";
 import { useWillUnmount as p } from "./hooks/useWillUnmount.js";
-import { useIsMounted as i } from "./hooks/useIsMounted.js";
+import { useIsMounted as n } from "./hooks/useIsMounted.js";
 import { useIsMountedRef as d } from "./hooks/useIsMountedRef.js";
 import { useValueRef as M } from "./hooks/useValueRef.js";
 import { usePrevious as v } from "./hooks/usePrevious.js";
-import { useDerivedState as c } from "./hooks/useDerivedState.js";
-import { useEventListener as D } from "./hooks/useEventListener.js";
-import { useWindowSize as L } from "./hooks/useWindowSize.js";
+import { useDerivedState as S } from "./hooks/useDerivedState.js";
+import { useEventListener as y } from "./hooks/useEventListener.js";
+import { useWindowSize as D } from "./hooks/useWindowSize.js";
+import { useComponentSize as L } from "./hooks/useComponentSize.js";
 export {
   r as Maybe,
-  c as useDerivedState,
+  L as useComponentSize,
+  S as useDerivedState,
   s as useDidMount,
-  D as useEventListener,
-  i as useIsMounted,
+  y as useEventListener,
+  n as useIsMounted,
   d as useIsMountedRef,
   u as useIsomorphicLayoutEffect,
   v as usePrevious,
   M as useValueRef,
   p as useWillUnmount,
-  L as useWindowSize
+  D as useWindowSize
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliexme/react-utils",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "React utilities",
   "private": false,
   "author": "Alexander Smirnov <al.smirnov996@gmail.com>",
@@ -36,12 +36,12 @@
     "@aliexme/js-utils": "^2.1.3"
   },
   "devDependencies": {
-    "@types/react": "18.3.11",
+    "@types/react": "19.0.2",
     "@vitejs/plugin-react": "4.3.4",
-    "react": "18.3.1"
+    "react": "19.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
-  "gitHead": "9ae510e4b3200d033bd3e2d0e4016ff323b553c3"
+  "gitHead": "31fd544c8bd0a13dabfbb4b1177aa15c644fbf8f"
 }