@siberiacancode/reactuse 0.0.8 → 0.0.9

package/dist/index.d.ts

@@ -122,23 +122,44 @@ type UseCounter = {
  *
  * @example
  * const { count, dec, inc, reset, set } = useCounter(5);
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter({ initialValue: 5, min: 0, max: 10 });
  */
 declare const useCounter: UseCounter;
 
 interface UseDebouncedValueOptions {
     maxWait?: number;
 }
+declare const useDebouncedValue: <Value>(value: Value, delay: number, options?: UseDebouncedValueOptions) => readonly [Value, (value: Value) => void];
+
 /**
- * @name useDebouncedValue
- * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ * @name useDefault
+ * @description - Hook that returns the default value
  *
- * @param {any} value fix me
- * @param {number} delay The delay in milliseconds
+ * @template Value The type of the value
+ * @param {Value} initialValue The initial value
+ * @param {Value} defaultValue The default value
+ * @returns {[Value, (value: Value) => void]} An array containing the current value and a function to set the value
  *
  * @example
- * const { count, dec, inc, reset, set } = useCounter(5);
+ * const [value, setValue] = useDefault(initialValue, defaultValue);
  */
-declare const useDebouncedValue: <Value>(value: Value, delay: number, options?: UseDebouncedValueOptions) => readonly [Value, (value: Value) => void];
+declare const useDefault: <Value>(initialValue: Value | (() => Value), defaultValue: Value) => readonly [Value, React.Dispatch<React.SetStateAction<Value | null | undefined>>];
+
+/**
+ * @name useDidUpdate
+ * @description – Hook that behaves like useEffect, but skips the effect on the initial render
+ *
+ * @param {React.EffectCallback} effect The effect callback
+ * @param {React.DependencyList} [deps] The dependencies list for the effect
+ *
+ * @example
+ * useDidUpdate(() => {
+ *   console.log('Won't be called when mounted');
+ * }, [deps]);
+ */
+declare const useDidUpdate: (effect: React.EffectCallback, deps?: React.DependencyList) => void;
 
 /** The use document title options type */
 interface UseDocumentTitleOptions {
@@ -184,15 +205,45 @@ type UseEventListener = {
     <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(target: Document, event: Event | Event[], listener: (this: Document, event: DocumentEventMap[Event]) => void, options?: UseEventListenerOptions): void;
     <Target extends UseEventListenerTarget, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(target: Target, event: Event | Event[], listener: (this: Target, event: HTMLElementEventMap[Event]) => void, options?: UseEventListenerOptions): void;
     <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(event: Event | Event[], listener: (this: Target, event: HTMLElementEventMap[Event]) => void, options?: UseEventListenerOptions, target?: never): UseEventListenerReturn<Target>;
+    <Target extends Element, Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap>(event: Event | Event[], listener: (this: Target, event: MediaQueryListEventMap[Event]) => void, options?: UseEventListenerOptions, target?: never): UseEventListenerReturn<Target>;
 };
+declare const useEventListener: UseEventListener;
+
+/** The use favicon options */
+interface UseFaviconOptions {
+    /** The rel of the favicon */
+    rel: string;
+}
+/** The use favicon return type */
+type UseFaviconReturn = [string, React.Dispatch<React.SetStateAction<string>>];
 /**
- * @name useEventListener
- * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ * @name useFavicon
+ * @description - Hook that manages the favicon
+ *
+ * @param {string} initialFavicon The initial favicon. If not provided, the current favicon will be used
+ * @param {string} [options.rel] The rel of the favicon
+ * @returns {UseFaviconReturn} An array containing the current favicon and a function to update the favicon
  *
  * @example
- * const { count, dec, inc, reset, set } = useCounter(5);
+ * const { href, set } = useFavicon('https://www.google.com/favicon.ico');
  */
-declare const useEventListener: UseEventListener;
+declare const useFavicon: (initialHref?: string, options?: UseFaviconOptions) => {
+    readonly href: string | undefined;
+    readonly set: (favicon: string) => void;
+};
+
+/** The use hash return type */
+type UseHashReturn = [string, (value: string) => void];
+/**
+ * @name useHash
+ * @description - Hook that manages the hash value
+ *
+ * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
+ *
+ * @example
+ * const [hash, setHash] = useHash();
+ */
+declare const useHash: () => UseHashReturn;
 
 interface UseHoverOptions {
     onEntry?: () => void;
@@ -233,6 +284,28 @@ type UseHover = {
  */
 declare const useHover: UseHover;
 
+interface UseIdleOptions {
+    initialState?: boolean;
+    events?: Array<keyof WindowEventMap>;
+}
+interface UseIdleReturn {
+    idle: boolean;
+    lastActive: number;
+}
+/**
+ * @name useIdle
+ * @description - Hook that defines the logic when the user is idle
+ *
+ * @param {number} [milliseconds=ONE_MINUTE] The idle time in milliseconds
+ * @param {boolean} [options.initialState=false] The options for the hook
+ * @param {Array<keyof WindowEventMap>} [options.events=IDLE_EVENTS]
+ * @returns {UseIdleReturn} An object containing the idle state and the last active time
+ *
+ * @example
+ * const { idle, lastActive } = useIdle();
+ */
+declare const useIdle: (milliseconds?: number, { initialState, events }?: UseIdleOptions) => UseIdleReturn;
+
 /**
  * @name useIsomorphicLayoutEffect
  * @description - Hook conditionally selects either `useLayoutEffect` or `useEffect` based on the environment
@@ -307,17 +380,55 @@ type UseStorageReturn<Value> = [
     remove: () => void
 ];
 declare const dispatchStorageEvent: (params: Partial<StorageEvent>) => boolean;
+declare const useStorage: <Value>(key: string, params?: UseStorageInitialValue<Value> | UseStorageOptions<Value>) => readonly [Value, (value: Value) => void, () => void];
+
 /**
- * @name useStorage
- * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ * @name useLocalStorage
+ * @description - Hook that manages local storage value
+ *
+ * @template Value The type of the value
+ * @param {string} key The key of the storage
+ * @param {UseStorageInitialValue<Value>} [initialValue] The initial value of the storage
+ * @param {UseStorageOptions<Value>} [options] The options of the storage
+ *
+ * @example
+ * const [value, setValue, removeValue] = useLocalStorage('key', 'value');
+ */
+declare const useLocalStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => readonly [Value, (value: Value) => void, () => void];
+
+/**
+ * @name useLogger
+ * @description - Hook for debugging lifecycle
+ *
+ * @param {string} name The name or identifier for the logger
+ * @param {unknown[]} params Additional arguments to be logged
  *
  * @example
- * text
+ * useLogger('Component', [1, 2, 3]);
  */
-declare const useStorage: <Value>(key: string, params?: UseStorageInitialValue<Value> | UseStorageOptions<Value>) => readonly [Value | undefined, (value: Value) => void, () => void];
+declare const useLogger: (name: string, params: unknown[]) => void;
 
-declare const useLocalStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => readonly [Value | undefined, (value: Value) => void, () => void];
+/**
+ * @name useMediaQuery
+ * @description - Hook that manages a media query
+ *
+ * @param {string} query The media query string
+ * @returns {boolean} A boolean indicating if the media query matches
+ *
+ * @example
+ * const matches = useMediaQuery('(max-width: 768px)');
+ */
+declare const useMediaQuery: (query: string) => boolean;
 
+/**
+ * @name useMount
+ * @description - Hook that executes a callback when the component mounts
+ *
+ * @param {React.EffectCallback} effect The callback to execute
+ *
+ * @example
+ * useMount(() => console.log('This effect runs on the initial render'));
+ */
 declare const useMount: (effect: React.EffectCallback) => void;
 
 type ConnectionType = Connection['type'];
@@ -352,25 +463,59 @@ declare const getConnection: () => Connection;
 declare const useNetwork: () => UseNetworkReturn;
 
 /**
- * @name useNonInitialEffect
- * @description – Hook that behaves like useEffect, but skips the effect on the initial render
+ * @name useOnline
+ * @description - Hook that manages if the user is online
  *
- * @param {React.EffectCallback} effect The effect callback
- * @param {React.DependencyList} [deps] The dependencies list for the effect
+ * @returns {boolean} A boolean indicating if the user is online
  *
  * @example
- * useNonInitialEffect(() => {
- *   console.log('this effect doesn't run on the initial render');
- * });
+ * const online = useOnline();
  */
-declare const useNonInitialEffect: (effect: React.EffectCallback, deps?: React.DependencyList) => void;
-
 declare const useOnline: () => boolean;
 
-declare const useOrientation: () => {
+type OperatingSystem = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';
+declare const getOperatingSystem: () => OperatingSystem;
+/**
+ * @name useOperatingSystem
+ * @description - Hook that returns the operating system of the current browser
+ *
+ * @returns {OperatingSystem} The operating system
+ *
+ * @example
+ * const operatingSystem = useOperatingSystem();
+ */
+declare const useOperatingSystem: () => OperatingSystem;
+
+/** The use orientation return type */
+interface UseOrientationReturn {
+    /** The current screen orientation angle */
     angle: number;
+    /** The screen orientation type */
     type: OrientationType;
-};
+}
+/**
+ * @name useOrientation
+ * @description - Hook that returns the current screen orientation
+ *
+ * @returns {UseOrientationReturn} An object containing the current screen orientation
+ *
+ * @example
+ * const { angle, type } = useOrientation();
+ */
+declare const useOrientation: () => UseOrientationReturn;
+
+/**
+ * @name usePrevious
+ * @description - Hook that returns the previous value
+ *
+ * @template Value The type of the value
+ * @param {Value} value The value to get the previous value
+ * @returns {Value} The previous value
+ *
+ * @example
+ * const prevValue = usePrevious(value);
+ */
+declare const usePrevious: <Value>(value: Value) => Value | undefined;
 
 /**
  * @name useRenderCount
@@ -383,7 +528,70 @@ declare const useOrientation: () => {
  */
 declare const useRenderCount: () => number;
 
-declare const useSessionStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => readonly [Value | undefined, (value: Value) => void, () => void];
+/** The use rerender return type */
+interface UseRerenderReturns {
+    /** The id of the rerender */
+    id: string;
+    /** Function to rerender the component */
+    update: () => void;
+}
+/**
+ * @name useRerender
+ * @description - Hook that defines the logic to force rerender a component
+ *
+ * @returns {UseRerenderReturns} An object containing the id and update function
+ *
+ * @example
+ * const { id, update } = useRerender();
+ */
+declare const useRerender: () => UseRerenderReturns;
+
+type UseScriptStatus = 'loading' | 'ready' | 'error' | 'unknown';
+declare const SCRIPT_STATUS_ATTRIBUTE_NAME = "script-status";
+interface UseScriptOptions extends React.ComponentProps<'script'> {
+    removeOnUnmount?: boolean;
+}
+/**
+ * @name useScript
+ * @description - Hook that manages a script with onLoad, onError, and removeOnUnmount functionalities
+ *
+ * @param {string} src The source of the script
+ * @param {UseScriptOptions} [options] The options of the script extends from attributes script tag
+ * @param {boolean} [options.removeOnUnmount=true] Whether to remove the script on unmount
+ * @param {boolean} [options.async=true] Whether to load the script asynchronously
+ * @returns {UseScriptStatus} The status of the script
+ *
+ * @example
+ * const status = useScript('https://example.com/script.js');
+ */
+declare const useScript: (src: string, options?: UseScriptOptions) => UseScriptStatus;
+
+/**
+ * @name useSessionStorage
+ * @description - Hook that manages session storage value
+ *
+ * @template Value The type of the value
+ * @param {string} key The key of the storage
+ * @param {UseStorageInitialValue<Value>} [initialValue] The initial value of the storage
+ * @param {UseStorageOptions<Value>} [options] The options of the storage
+ *
+ * @example
+ * const [value, setValue, removeValue] = useSessionStorage('key', 'value');
+ */
+declare const useSessionStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => readonly [Value, (value: Value) => void, () => void];
+
+/**
+ * @name useSet
+ * @description - Hook that manages a set structure
+ *
+ * @template Value The type of the value
+ * @param {Value[]} values The initial array of the set
+ * @returns {Set<Value>} A set structure
+ *
+ * @example
+ * const set = useSet([1, 2, 3]);
+ */
+declare const useSet: <Value>(values: Value[]) => Set<Value>;
 
 /** The use step params */
 interface UseStepParams {
@@ -426,6 +634,7 @@ interface UseStepReturn {
  *
  * @example
  * const step = useStep(5);
+ *
  * @example
  * const stepper = useStep({ initial: 2, max: 5 });
  */
@@ -451,7 +660,21 @@ interface UseTimeoutReturn {
  */
 declare function useTimeout(callback: () => void, delay: number): UseTimeoutReturn;
 
+/** The use toggle return type */
 type UseToggleReturn<Value> = readonly [Value, (value?: Value) => void];
+/**
+ * @name useToggle
+ * @description - Hook that create toggle
+ *
+ * @template Value The type of the value
+ * @param {Value[]} [values=[false, true]] The values to toggle
+ *
+ * @example
+ * const [on, toggle] = useToggle();
+ *
+ * @example
+ * const [value, toggle] = useToggle(['light', 'dark'] as const);
+ */
 declare const useToggle: <Value = boolean>(values?: readonly Value[]) => readonly [Value, (value?: Value) => void];
 
 /**
@@ -462,7 +685,7 @@ declare const useToggle: <Value = boolean>(values?: readonly Value[]) => readonl
  * @returns {void}
  *
  * @example
- * useUnmount(() => console.log('Component unmounted'));
+ * useUnmount(() => console.log('This effect runs on component unmount'));
  */
 declare const useUnmount: (callback: () => void) => void;
 
@@ -511,4 +734,4 @@ declare const useWindowSize: (params?: UseWindowSizeParams) => {
     height: number;
 };
 
-export { type ConnectionEffectiveType, type ConnectionType, type UseClickOutside, type UseClickOutsideReturn, type UseCounter, type UseCounterOptions, type UseCounterParams, type UseCounterReturn, type UseDocumentTitleOptions, type UseDocumentTitleReturn, type UseEventListener, type UseEventListenerOptions, type UseEventListenerReturn, type UseEventListenerTarget, type UseHover, type UseHoverOptions, type UseHoverReturn, type UseHoverTarget, type UseKeyPressEvent, type UseKeyPressEventKey, type UseKeyPressKey, type UseKeyPressOptions, type UseNetworkReturn, type UseStorageInitialValue, type UseStorageOptions, type UseStorageReturn, type UseToggleReturn, type UseWindowSizeReturn, dispatchStorageEvent, getConnection, legacyCopyToClipboard, useBattery, useBoolean, useClickOutside, useCopyToClipboard, useCounter, useDebouncedValue, useDocumentTitle, useDocumentVisibility, useEventListener, useHover, useIsomorphicLayoutEffect, useKeyPress, useKeyPressEvent, useKeysPressed, useLocalStorage, useMount, useNetwork, useNonInitialEffect, useOnline, useOrientation, useRenderCount, useSessionStorage, useStep, useStorage, useTimeout, useToggle, useUnmount, useWindowEvent, useWindowSize };
+export { type ConnectionEffectiveType, type ConnectionType, type OperatingSystem, SCRIPT_STATUS_ATTRIBUTE_NAME, type UseClickOutside, type UseClickOutsideReturn, type UseCounter, type UseCounterOptions, type UseCounterParams, type UseCounterReturn, type UseDocumentTitleOptions, type UseDocumentTitleReturn, type UseEventListener, type UseEventListenerOptions, type UseEventListenerReturn, type UseEventListenerTarget, type UseFaviconOptions, type UseFaviconReturn, type UseHover, type UseHoverOptions, type UseHoverReturn, type UseHoverTarget, type UseIdleReturn, type UseKeyPressEvent, type UseKeyPressEventKey, type UseKeyPressKey, type UseKeyPressOptions, type UseNetworkReturn, type UseOrientationReturn, type UseScriptOptions, type UseScriptStatus, type UseStorageInitialValue, type UseStorageOptions, type UseStorageReturn, type UseToggleReturn, type UseWindowSizeReturn, dispatchStorageEvent, getConnection, getOperatingSystem, legacyCopyToClipboard, useBattery, useBoolean, useClickOutside, useCopyToClipboard, useCounter, useDebouncedValue, useDefault, useDidUpdate, useDocumentTitle, useDocumentVisibility, useEventListener, useFavicon, useHash, useHover, useIdle, useIsomorphicLayoutEffect, useKeyPress, useKeyPressEvent, useKeysPressed, useLocalStorage, useLogger, useMediaQuery, useMount, useNetwork, useOnline, useOperatingSystem, useOrientation, usePrevious, useRenderCount, useRerender, useScript, useSessionStorage, useSet, useStep, useStorage, useTimeout, useToggle, useUnmount, useWindowEvent, useWindowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Ultimate tool",
   "license": "MIT",
   "author": {

package/dist/cjs/_rollupPluginBabelHelpers-Cva0m6Ep.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-Cva0m6Ep.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/cjs/hooks/useNonInitialEffect/useNonInitialEffect.js

@@ -1,3 +0,0 @@
-/* @license @siberiacancode/reactuse v0.0.5 */
-"use strict";var e=require("react"),r=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js");require("../../utils/helpers/isClient.js");exports.useNonInitialEffect=function(t,u){var i=e.useRef(!0);r.useIsomorphicLayoutEffect((function(){if(!i.current){var e=t();return e&&"function"==typeof e?e:void 0}i.current=!1}),u)};
-//# sourceMappingURL=useNonInitialEffect.js.map

package/dist/cjs/hooks/useNonInitialEffect/useNonInitialEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNonInitialEffect.js","sources":["../../../../src/hooks/useNonInitialEffect/useNonInitialEffect.ts"],"sourcesContent":["import React from 'react';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\n\n/**\n * @name useNonInitialEffect\n * @description – Hook that behaves like useEffect, but skips the effect on the initial render\n *\n * @param {React.EffectCallback} effect The effect callback\n * @param {React.DependencyList} [deps] The dependencies list for the effect\n *\n * @example\n * useNonInitialEffect(() => {\n *   console.log('this effect doesn't run on the initial render');\n * });\n */\nexport const useNonInitialEffect = (effect: React.EffectCallback, deps?: React.DependencyList) => {\n  const initialRender = React.useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (initialRender.current) {\n      initialRender.current = false;\n      return;\n    }\n\n    const effectReturns = effect();\n    if (effectReturns && typeof effectReturns === 'function') {\n      return effectReturns;\n    }\n  }, deps);\n};\n"],"names":["effect","deps","initialRender","React","useRef","useIsomorphicLayoutEffect","current","effectReturns"],"mappings":";kLAgBmC,SAACA,EAA8BC,GAChE,IAAMC,EAAgBC,EAAMC,QAAO,GAEnCC,EAAAA,2BAA0B,WACxB,IAAIH,EAAcI,QAAlB,CAKA,IAAMC,EAAgBP,IACtB,OAAIO,GAA0C,mBAAlBA,EACnBA,OADT,CAHA,CAFEL,EAAcI,SAAU,CAQ3B,GAAEL,EACL"}

package/dist/esm/_rollupPluginBabelHelpers-8YyPIzj_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-8YyPIzj_.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/hooks/useNonInitialEffect/useNonInitialEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNonInitialEffect.js","sources":["../../../../src/hooks/useNonInitialEffect/useNonInitialEffect.ts"],"sourcesContent":["import React from 'react';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\n\n/**\n * @name useNonInitialEffect\n * @description – Hook that behaves like useEffect, but skips the effect on the initial render\n *\n * @param {React.EffectCallback} effect The effect callback\n * @param {React.DependencyList} [deps] The dependencies list for the effect\n *\n * @example\n * useNonInitialEffect(() => {\n *   console.log('this effect doesn't run on the initial render');\n * });\n */\nexport const useNonInitialEffect = (effect: React.EffectCallback, deps?: React.DependencyList) => {\n  const initialRender = React.useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (initialRender.current) {\n      initialRender.current = false;\n      return;\n    }\n\n    const effectReturns = effect();\n    if (effectReturns && typeof effectReturns === 'function') {\n      return effectReturns;\n    }\n  }, deps);\n};\n"],"names":["useNonInitialEffect","effect","deps","initialRender","React","useRef","useIsomorphicLayoutEffect","current","effectReturns"],"mappings":";mKAgBO,IAAMA,EAAsB,SAACC,EAA8BC,GAChE,IAAMC,EAAgBC,EAAMC,QAAO,GAEnCC,GAA0B,WACxB,IAAIH,EAAcI,QAAlB,CAKA,IAAMC,EAAgBP,IACtB,OAAIO,GAA0C,mBAAlBA,EACnBA,OADT,CAHA,CAFEL,EAAcI,SAAU,CAQ3B,GAAEL,EACL"}