@pushwoosh/kit-helpers 4.8.1 → 4.8.3

package/formatNumber.d.ts

@@ -0,0 +1,3 @@
+type NumberFormat = 'spaced' | 'short';
+export declare const formatNumber: (number: number, format: NumberFormat) => string;
+export {};

package/formatNumber.js

@@ -0,0 +1,21 @@
+const getNumberAsSpacedString = number => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+const getNumberAsShortString = num => {
+  if (num < 10000) {
+    return getNumberAsSpacedString(num);
+  }
+  const formatter = new Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1
+  });
+  return formatter.format(num);
+};
+export const formatNumber = (number, format) => {
+  switch (format) {
+    case 'spaced':
+      return getNumberAsSpacedString(number);
+    case 'short':
+      return getNumberAsShortString(number);
+    default:
+      return number.toString();
+  }
+};

package/hooks/usePersistentFunction.d.ts

@@ -1 +1,47 @@
-export default function usePersistentFunction<T extends (...args: any[]) => any>(callback: T): T;
+/**
+ * Creates a stable function reference that always calls the latest version of a callback.
+ *
+ * This hook is useful when you need to pass a callback to a child component or as a dependency
+ * to another hook, but want to avoid unnecessary re-renders when the callback changes.
+ *
+ * Unlike using plain `useCallback`, this approach ensures that the latest version of the
+ * callback is always used, even if the reference remains stable.
+ *
+ * @param callback - The function that should be persisted
+ * @returns A stable function reference that will always call the most recent version of the provided callback
+ *
+ * @example
+ * // Using with event handlers
+ * const MyComponent = () => {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // This function reference remains stable across renders
+ *   // but will always use the current value of `count`
+ *   const handleClick = usePersistentFunction(() => {
+ *     console.log(`Current count: ${count}`);
+ *   });
+ *
+ *   return <ChildComponent onClick={handleClick} />;
+ * };
+ *
+ * @example
+ * // Using with cleanup functions
+ * const MyComponent = () => {
+ *   const [resource, setResource] = useState(null);
+ *
+ *   // The cleanup function remains stable but always uses the latest resource
+ *   const cleanup = usePersistentFunction(() => {
+ *     if (resource) {
+ *       resource.dispose();
+ *     }
+ *   });
+ *
+ *   useEffect(() => {
+ *     // Some setup code...
+ *     return cleanup;
+ *   }, []); // No need to include cleanup in dependencies
+ *
+ *   return <div>...</div>;
+ * };
+ */
+export default function usePersistentFunction<Args extends any[], Return>(callback: (...args: Args) => Return): (...args: Args) => Return;

package/hooks/usePersistentFunction.js

@@ -1,6 +1,55 @@
 import { useCallback, useRef } from 'react';
+/**
+ * Creates a stable function reference that always calls the latest version of a callback.
+ *
+ * This hook is useful when you need to pass a callback to a child component or as a dependency
+ * to another hook, but want to avoid unnecessary re-renders when the callback changes.
+ *
+ * Unlike using plain `useCallback`, this approach ensures that the latest version of the
+ * callback is always used, even if the reference remains stable.
+ *
+ * @param callback - The function that should be persisted
+ * @returns A stable function reference that will always call the most recent version of the provided callback
+ *
+ * @example
+ * // Using with event handlers
+ * const MyComponent = () => {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // This function reference remains stable across renders
+ *   // but will always use the current value of `count`
+ *   const handleClick = usePersistentFunction(() => {
+ *     console.log(`Current count: ${count}`);
+ *   });
+ *
+ *   return <ChildComponent onClick={handleClick} />;
+ * };
+ *
+ * @example
+ * // Using with cleanup functions
+ * const MyComponent = () => {
+ *   const [resource, setResource] = useState(null);
+ *
+ *   // The cleanup function remains stable but always uses the latest resource
+ *   const cleanup = usePersistentFunction(() => {
+ *     if (resource) {
+ *       resource.dispose();
+ *     }
+ *   });
+ *
+ *   useEffect(() => {
+ *     // Some setup code...
+ *     return cleanup;
+ *   }, []); // No need to include cleanup in dependencies
+ *
+ *   return <div>...</div>;
+ * };
+ */
 export default function usePersistentFunction(callback) {
-  const ref = useRef(callback);
-  ref.current = callback;
-  return useCallback((...args) => ref.current(...args), []);
+  // Store the latest callback in a ref
+  const callbackRef = useRef(callback);
+  // Update the ref to the latest callback on each render
+  callbackRef.current = callback;
+  // Create a stable function reference that calls the latest callback
+  return useCallback((...args) => callbackRef.current(...args), []);
 }

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from './grid';
 export * from './expand';
 export * from './hooks/useClickAway';
+export { formatNumber } from './formatNumber';
 export { default as usePersistentFunction } from './hooks/usePersistentFunction';
 export { default as useEffectOnce } from './hooks/useEffectOnce';
 export { default as useMountedState } from './hooks/useMountedState';

package/index.js

@@ -1,6 +1,7 @@
 export * from './grid';
 export * from './expand';
 export * from './hooks/useClickAway';
+export { formatNumber } from './formatNumber';
 export { default as usePersistentFunction } from './hooks/usePersistentFunction';
 export { default as useEffectOnce } from './hooks/useEffectOnce';
 export { default as useMountedState } from './hooks/useMountedState';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-helpers",
-  "version": "4.8.1",
+  "version": "4.8.3",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",