@aliexme/react-utils 2.2.0 → 2.4.0

package/dist/hooks/index.d.ts

@@ -6,5 +6,7 @@ export * from './useIsMountedRef';
 export * from './useValueRef';
 export * from './usePrevious';
 export * from './useDerivedState';
+export * from './useSlaveState';
 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/useSlaveState.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),a=e=>{const[u,t]=s.useState(e);return s.useEffect(()=>{t(e)},[e]),[u,t]};exports.useSlaveState=a;

package/dist/hooks/useSlaveState.d.ts

@@ -0,0 +1 @@
+export declare const useSlaveState: <T>(masterState: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];

package/dist/hooks/useSlaveState.js

@@ -0,0 +1,10 @@
+import { useState as s, useEffect as u } from "react";
+const a = (e) => {
+  const [o, t] = s(e);
+  return u(() => {
+    t(e);
+  }, [e]), [o, t];
+};
+export {
+  a as useSlaveState
+};

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"),a=require("./hooks/useSlaveState.cjs"),d=require("./hooks/useEventListener.cjs"),S=require("./hooks/useWindowSize.cjs"),l=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.useSlaveState=a.useSlaveState;exports.useEventListener=d.useEventListener;exports.useWindowSize=S.useWindowSize;exports.useComponentSize=l.useComponentSize;

package/dist/index.js

@@ -2,23 +2,27 @@ 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 { useIsMountedRef as d } from "./hooks/useIsMountedRef.js";
-import { useValueRef as M } from "./hooks/useValueRef.js";
+import { useIsMounted as n } from "./hooks/useIsMounted.js";
+import { useIsMountedRef as a } from "./hooks/useIsMountedRef.js";
+import { useValueRef as S } from "./hooks/useValueRef.js";
 import { usePrevious as v } from "./hooks/usePrevious.js";
-import { useDerivedState as c } from "./hooks/useDerivedState.js";
+import { useDerivedState as I } from "./hooks/useDerivedState.js";
+import { useSlaveState as y } from "./hooks/useSlaveState.js";
 import { useEventListener as D } from "./hooks/useEventListener.js";
 import { useWindowSize as L } from "./hooks/useWindowSize.js";
+import { useComponentSize as W } from "./hooks/useComponentSize.js";
 export {
   r as Maybe,
-  c as useDerivedState,
+  W as useComponentSize,
+  I as useDerivedState,
   s as useDidMount,
   D as useEventListener,
-  i as useIsMounted,
-  d as useIsMountedRef,
+  n as useIsMounted,
+  a as useIsMountedRef,
   u as useIsomorphicLayoutEffect,
   v as usePrevious,
-  M as useValueRef,
+  y as useSlaveState,
+  S as useValueRef,
   p as useWillUnmount,
   L as useWindowSize
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliexme/react-utils",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "React utilities",
   "private": false,
   "author": "Alexander Smirnov <al.smirnov996@gmail.com>",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
   },
-  "gitHead": "f616380667c0da83071a063d16d2113158371b0e"
+  "gitHead": "06f05a91384c0fbe48bdf915381bd22fecc48827"
 }