@siberiacancode/reactuse 0.2.14 → 0.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useQuery/useQuery.cjs.map +1 -1
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs +20 -20
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs.map +1 -1
- package/dist/esm/hooks/useQuery/useQuery.mjs.map +1 -1
- package/dist/types/hooks/useIntersectionObserver/useIntersectionObserver.d.ts +22 -2
- package/package.json +4 -4
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../useRefState/useRefState.cjs"),v=require("../../utils/helpers/isTarget.cjs"),b=require("../../utils/helpers/getElement.cjs"),h=(...e)=>{const n=v.isTarget(e[0])?e[0]:void 0,t=n?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},c=t?.onChange,i=t?.enabled??!0,[r,a]=s.useState(),o=d.useRefState(),u=s.useRef(c);return u.current=c,s.useEffect(()=>{if(!i||!n&&!o.state)return;const g=n?b.getElement(n):o.current;if(!g)return;const f=new IntersectionObserver(([l])=>{a(l),u.current?.(l)},{...t,root:t?.root?b.getElement(t.root):document});return f.observe(g),()=>{f.disconnect()}},[n,o.state,t?.rootMargin,t?.threshold,t?.root,i]),n?{entry:r,inView:!!r?.isIntersecting}:{ref:o,entry:r,inView:!!r?.isIntersecting}};exports.useIntersectionObserver=h;
|
|
2
2
|
//# sourceMappingURL=useIntersectionObserver.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntersectionObserver.cjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n enabled?: boolean;\n root?: HookTarget;\n onChange?: (entry: IntersectionObserverEntry) => void;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n entry?: IntersectionObserverEntry;\n inView: boolean;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Browser\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(ref);\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseIntersectionObserverOptions | undefined;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const internalRef = useRefState<Element>();\n const internalOnChangeRef = useRef<UseIntersectionObserverOptions['onChange']>(
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.cjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n enabled?: boolean;\n root?: HookTarget;\n onChange?: (entry: IntersectionObserverEntry) => void;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n entry?: IntersectionObserverEntry;\n inView: boolean;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n <Target extends Element>(\n callback: (entry: IntersectionObserverEntry) => void,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (\n callback: (entry: IntersectionObserverEntry) => void,\n target: HookTarget\n ): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Browser\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(() => console.log('callback'), ref);\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseIntersectionObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const internalRef = useRefState<Element>();\n const internalOnChangeRef = useRef<UseIntersectionObserverOptions['onChange']>(callback);\n internalOnChangeRef.current = callback;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = target ? getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n setEntry(entry);\n internalOnChangeRef.current?.(entry);\n },\n {\n ...options,\n root: options?.root ? (getElement(options.root) as Document | Element) : document\n }\n );\n\n observer.observe(element as Element);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);\n\n if (target) return { entry, inView: !!entry?.isIntersecting };\n return {\n ref: internalRef,\n entry,\n inView: !!entry?.isIntersecting\n };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","internalRef","useRefState","internalOnChangeRef","useRef","useEffect","element","getElement","observer"],"mappings":"mPAqFaA,EAA2B,IAAIC,IAAkB,CAC5D,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAOC,CAAQ,EAAIC,WAAA,EAEpBC,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAmDR,CAAQ,EA2BvF,OA1BAO,EAAoB,QAAUP,EAE9BS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACR,GAAY,CAACJ,GAAU,CAACQ,EAAY,MAAQ,OAEjD,MAAMK,EAAUb,EAASc,EAAAA,WAAWd,CAAM,EAAIQ,EAAY,QAC1D,GAAI,CAACK,EAAS,OAEd,MAAME,EAAW,IAAI,qBACnB,CAAC,CAACV,CAAK,IAAM,CACXC,EAASD,CAAK,EACdK,EAAoB,UAAUL,CAAK,CAAA,EAErC,CACE,GAAGH,EACH,KAAMA,GAAS,KAAQY,EAAAA,WAAWZ,EAAQ,IAAI,EAA2B,QAAA,CAC3E,EAGF,OAAAa,EAAS,QAAQF,CAAkB,EAE5B,IAAM,CACXE,EAAS,WAAA,CAAW,CACtB,EACC,CAACf,EAAQQ,EAAY,MAAON,GAAS,WAAYA,GAAS,UAAWA,GAAS,KAAME,CAAO,CAAC,EAE3FJ,EAAe,CAAE,MAAAK,EAAO,OAAQ,CAAC,CAACA,GAAO,cAAA,EACtC,CACL,IAAKG,EACL,MAAAH,EACA,OAAQ,CAAC,CAACA,GAAO,cAAA,CAErB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQuery.cjs","sources":["../../../../src/hooks/useQuery/useQuery.ts"],"sourcesContent":["import type { DependencyList } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getRetry } from '@/utils/helpers';\n\nimport { useDidUpdate } from '../useDidUpdate/useDidUpdate';\nimport { useMount } from '../useMount/useMount';\n\n/* The use query return type */\nexport interface UseQueryOptions<QueryData, Data> {\n /* The enabled state of the query */\n enabled?: boolean;\n /* The depends for the hook */\n keys?: DependencyList;\n /* The placeholder data for the hook */\n placeholderData?: (() => Data) | Data;\n /* The refetch interval */\n refetchInterval?: number;\n /* The retry count of requests */\n retry?: boolean | number;\n /* The retry delay of requests */\n retryDelay?: ((retry: number, error: Error) => number) | number;\n /* The callback function to be invoked on error */\n onError?: (error: Error) => void;\n /* The callback function to be invoked on success */\n onSuccess?: (data: Data) => void;\n /* The select function to be invoked */\n select?: (data: QueryData) => Data;\n}\n\ninterface UseQueryCallbackParams {\n /* The depends for the hook */\n keys: DependencyList;\n /* The abort signal */\n signal: AbortSignal;\n}\n\n/* The use query return type */\nexport interface UseQueryReturn<Data> {\n /* The abort function */\n abort: AbortController['abort'];\n /* The state of the query */\n data?: Data;\n /* The success state of the query */\n error?: Error;\n /* The error state of the query */\n isError: boolean;\n /* The fetching state of the query */\n isFetching: boolean;\n /* The loading state of the query */\n isLoading: boolean;\n /* The refetching state of the query */\n isRefetching: boolean;\n /* The success state of the query */\n isSuccess: boolean;\n /* The refetch function */\n refetch: () => void;\n}\n\n/**\n * @name useQuery\n * @description - Hook that defines the logic when query data\n * @category Utilities\n *\n * @template Data The type of the data\n * @param {() => Promise<Data>} callback The callback function to be invoked\n * @param {DependencyList} [options.keys] The dependencies for the hook\n * @param {(data: Data) => void} [options.onSuccess] The callback function to be invoked on success\n * @param {(error: Error) => void} [options.onError] The callback function to be invoked on error\n * @param {UseQueryOptionsSelect<Data>} [options.select] The select function to be invoked\n * @param {Data | (() => Data)} [options.initialData] The initial data for the hook\n * @param {Data | (() => Data)} [options.placeholderData] The placeholder data for the hook\n * @param {number} [options.refetchInterval] The refetch interval\n * @param {boolean | number} [options.retry] The retry count of requests\n * @returns {UseQueryReturn<Data>} An object with the state of the query\n *\n * @example\n * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort, aborted } = useQuery(() => fetch('url'));\n */\nexport const useQuery = <QueryData, Data = QueryData>(\n callback: (params: UseQueryCallbackParams) => Promise<QueryData>,\n options?: UseQueryOptions<QueryData, Data>\n): UseQueryReturn<Data> => {\n const enabled = options?.enabled ?? true;\n const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);\n const alreadyRequested = useRef(false);\n\n const [isFetching, setIsFetching] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [isError, setIsError] = useState(false);\n const [isRefetching, setIsRefetching] = useState(false);\n const [isSuccess, setIsSuccess] = useState(!!options?.placeholderData);\n\n const [error, setError] = useState<Error | undefined>(undefined);\n const [data, setData] = useState<Data | undefined>(options?.placeholderData);\n\n const abortControllerRef = useRef<AbortController>(new AbortController());\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n\n const keys = options?.keys ?? [];\n\n const abort = () => {\n abortControllerRef.current.abort();\n abortControllerRef.current = new AbortController();\n };\n\n const request = (action: 'init' | 'refetch') => {\n abort();\n\n setIsFetching(true);\n if (action === 'init') {\n alreadyRequested.current = true;\n setIsLoading(true);\n }\n if (action === 'refetch') setIsRefetching(true);\n callback({ signal: abortControllerRef.current.signal, keys })\n .then((response) => {\n const data = options?.select ? options?.select(response) : response;\n options?.onSuccess?.(data as Data);\n setData(data as Data);\n setIsSuccess(true);\n setError(undefined);\n setIsError(false);\n setIsFetching(false);\n if (action === 'init') setIsLoading(false);\n if (action === 'refetch') setIsRefetching(false);\n })\n .catch((error: Error) => {\n if (retryCountRef.current > 0) {\n retryCountRef.current -= 1;\n const retryDelay =\n typeof options?.retryDelay === 'function'\n ? options?.retryDelay(retryCountRef.current, error)\n : options?.retryDelay;\n\n if (retryDelay) {\n setTimeout(() => request(action), retryDelay);\n return;\n }\n\n return request(action);\n }\n options?.onError?.(error);\n setData(undefined);\n setIsSuccess(false);\n setError(error);\n setIsError(true);\n setIsFetching(false);\n if (action === 'init') setIsLoading(false);\n if (action === 'refetch') setIsRefetching(false);\n retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;\n })\n .finally(() => {\n if (options?.refetchInterval) {\n const interval = setInterval(() => {\n clearInterval(interval);\n request('refetch');\n }, options?.refetchInterval);\n intervalIdRef.current = interval;\n }\n });\n };\n\n useMount(() => {\n if (!enabled) return;\n request('init');\n });\n\n useDidUpdate(() => {\n if (!enabled) return;\n request(alreadyRequested.current ? 'refetch' : 'init');\n }, [enabled, ...keys]);\n\n useEffect(() => {\n return () => {\n clearInterval(intervalIdRef.current);\n };\n }, [enabled, options?.refetchInterval, options?.retry, ...keys]);\n\n const refetch = () => request('refetch');\n\n return {\n abort,\n data,\n error,\n refetch,\n isFetching,\n isLoading,\n isError,\n isSuccess,\n isRefetching\n };\n};\n"],"names":["useQuery","callback","options","enabled","retryCountRef","useRef","getRetry","alreadyRequested","isFetching","setIsFetching","useState","isLoading","setIsLoading","isError","setIsError","isRefetching","setIsRefetching","isSuccess","setIsSuccess","error","setError","data","setData","abortControllerRef","intervalIdRef","keys","abort","request","action","response","retryDelay","interval","useMount","useDidUpdate","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useQuery.cjs","sources":["../../../../src/hooks/useQuery/useQuery.ts"],"sourcesContent":["import type { DependencyList } from 'react';\r\n\r\nimport { useEffect, useRef, useState } from 'react';\r\n\r\nimport { getRetry } from '@/utils/helpers';\r\n\r\nimport { useDidUpdate } from '../useDidUpdate/useDidUpdate';\r\nimport { useMount } from '../useMount/useMount';\r\n\r\n/* The use query return type */\r\nexport interface UseQueryOptions<QueryData, Data> {\r\n /* The enabled state of the query */\r\n enabled?: boolean;\r\n /* The depends for the hook */\r\n keys?: DependencyList;\r\n /* The placeholder data for the hook */\r\n placeholderData?: (() => Data) | Data;\r\n /* The refetch interval */\r\n refetchInterval?: number;\r\n /* The retry count of requests */\r\n retry?: boolean | number;\r\n /* The retry delay of requests */\r\n retryDelay?: ((retry: number, error: Error) => number) | number;\r\n /* The callback function to be invoked on error */\r\n onError?: (error: Error) => void;\r\n /* The callback function to be invoked on success */\r\n onSuccess?: (data: Data) => void;\r\n /* The select function to be invoked */\r\n select?: (data: QueryData) => Data;\r\n}\r\n\r\ninterface UseQueryCallbackParams {\r\n /* The depends for the hook */\r\n keys: DependencyList;\r\n /* The abort signal */\r\n signal: AbortSignal;\r\n}\r\n\r\n/* The use query return type */\r\nexport interface UseQueryReturn<Data> {\r\n /* The abort function */\r\n abort: AbortController['abort'];\r\n /* The state of the query */\r\n data?: Data;\r\n /* The success state of the query */\r\n error?: Error;\r\n /* The error state of the query */\r\n isError: boolean;\r\n /* The fetching state of the query */\r\n isFetching: boolean;\r\n /* The loading state of the query */\r\n isLoading: boolean;\r\n /* The refetching state of the query */\r\n isRefetching: boolean;\r\n /* The success state of the query */\r\n isSuccess: boolean;\r\n /* The refetch function */\r\n refetch: () => void;\r\n}\r\n\r\n/**\r\n * @name useQuery\r\n * @description - Hook that defines the logic when query data\r\n * @category Utilities\r\n *\r\n * @template Data The type of the data\r\n * @param {() => Promise<Data>} callback The callback function to be invoked\r\n * @param {DependencyList} [options.keys] The dependencies for the hook\r\n * @param {(data: Data) => void} [options.onSuccess] The callback function to be invoked on success\r\n * @param {(error: Error) => void} [options.onError] The callback function to be invoked on error\r\n * @param {UseQueryOptionsSelect<Data>} [options.select] The select function to be invoked\r\n * @param {Data | (() => Data)} [options.initialData] The initial data for the hook\r\n * @param {Data | (() => Data)} [options.placeholderData] The placeholder data for the hook\r\n * @param {number} [options.refetchInterval] The refetch interval\r\n * @param {boolean | number} [options.retry] The retry count of requests\r\n * @returns {UseQueryReturn<Data>} An object with the state of the query\r\n *\r\n * @example\r\n * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort, aborted } = useQuery(() => fetch('url'));\r\n */\r\nexport const useQuery = <QueryData, Data = QueryData>(\r\n callback: (params: UseQueryCallbackParams) => Promise<QueryData>,\r\n options?: UseQueryOptions<QueryData, Data>\r\n): UseQueryReturn<Data> => {\r\n const enabled = options?.enabled ?? true;\r\n const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);\r\n const alreadyRequested = useRef(false);\r\n\r\n const [isFetching, setIsFetching] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n const [isRefetching, setIsRefetching] = useState(false);\r\n const [isSuccess, setIsSuccess] = useState(!!options?.placeholderData);\r\n\r\n const [error, setError] = useState<Error | undefined>(undefined);\r\n const [data, setData] = useState<Data | undefined>(options?.placeholderData);\r\n\r\n const abortControllerRef = useRef<AbortController>(new AbortController());\r\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\r\n\r\n const keys = options?.keys ?? [];\r\n\r\n const abort = () => {\r\n abortControllerRef.current.abort();\r\n abortControllerRef.current = new AbortController();\r\n };\r\n\r\n const request = (action: 'init' | 'refetch') => {\r\n abort();\r\n\r\n setIsFetching(true);\r\n if (action === 'init') {\r\n alreadyRequested.current = true;\r\n setIsLoading(true);\r\n }\r\n if (action === 'refetch') setIsRefetching(true);\r\n callback({ signal: abortControllerRef.current.signal, keys })\r\n .then((response) => {\r\n const data = options?.select ? options?.select(response) : response;\r\n options?.onSuccess?.(data as Data);\r\n setData(data as Data);\r\n setIsSuccess(true);\r\n setError(undefined);\r\n setIsError(false);\r\n setIsFetching(false);\r\n if (action === 'init') setIsLoading(false);\r\n if (action === 'refetch') setIsRefetching(false);\r\n })\r\n .catch((error: Error) => {\r\n if (retryCountRef.current > 0) {\r\n retryCountRef.current -= 1;\r\n const retryDelay =\r\n typeof options?.retryDelay === 'function'\r\n ? options?.retryDelay(retryCountRef.current, error)\r\n : options?.retryDelay;\r\n\r\n if (retryDelay) {\r\n setTimeout(() => request(action), retryDelay);\r\n return;\r\n }\r\n\r\n return request(action);\r\n }\r\n options?.onError?.(error);\r\n setData(undefined);\r\n setIsSuccess(false);\r\n setError(error);\r\n setIsError(true);\r\n setIsFetching(false);\r\n if (action === 'init') setIsLoading(false);\r\n if (action === 'refetch') setIsRefetching(false);\r\n retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;\r\n })\r\n .finally(() => {\r\n if (options?.refetchInterval) {\r\n const interval = setInterval(() => {\r\n clearInterval(interval);\r\n request('refetch');\r\n }, options?.refetchInterval);\r\n intervalIdRef.current = interval;\r\n }\r\n });\r\n };\r\n\r\n useMount(() => {\r\n if (!enabled) return;\r\n request('init');\r\n });\r\n\r\n useDidUpdate(() => {\r\n if (!enabled) return;\r\n request(alreadyRequested.current ? 'refetch' : 'init');\r\n }, [enabled, ...keys]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n clearInterval(intervalIdRef.current);\r\n };\r\n }, [enabled, options?.refetchInterval, options?.retry, ...keys]);\r\n\r\n const refetch = () => request('refetch');\r\n\r\n return {\r\n abort,\r\n data,\r\n error,\r\n refetch,\r\n isFetching,\r\n isLoading,\r\n isError,\r\n isSuccess,\r\n isRefetching\r\n };\r\n};\r\n"],"names":["useQuery","callback","options","enabled","retryCountRef","useRef","getRetry","alreadyRequested","isFetching","setIsFetching","useState","isLoading","setIsLoading","isError","setIsError","isRefetching","setIsRefetching","isSuccess","setIsSuccess","error","setError","data","setData","abortControllerRef","intervalIdRef","keys","abort","request","action","response","retryDelay","interval","useMount","useDidUpdate","useEffect"],"mappings":"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"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
import { getElement as
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
return i.current =
|
|
8
|
-
if (!s || !
|
|
9
|
-
const
|
|
10
|
-
if (!
|
|
1
|
+
import { useState as d, useRef as h, useEffect as v } from "react";
|
|
2
|
+
import { useRefState as m } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as C } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
import { getElement as b } from "../../utils/helpers/getElement.mjs";
|
|
5
|
+
const y = (...e) => {
|
|
6
|
+
const n = C(e[0]) ? e[0] : void 0, t = n ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, c = t?.onChange, s = t?.enabled ?? !0, [o, l] = d(), r = m(), i = h(c);
|
|
7
|
+
return i.current = c, v(() => {
|
|
8
|
+
if (!s || !n && !r.state) return;
|
|
9
|
+
const f = n ? b(n) : r.current;
|
|
10
|
+
if (!f) return;
|
|
11
11
|
const u = new IntersectionObserver(
|
|
12
|
-
([
|
|
13
|
-
|
|
12
|
+
([g]) => {
|
|
13
|
+
l(g), i.current?.(g);
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
|
-
...
|
|
17
|
-
root:
|
|
16
|
+
...t,
|
|
17
|
+
root: t?.root ? b(t.root) : document
|
|
18
18
|
}
|
|
19
19
|
);
|
|
20
|
-
return u.observe(
|
|
20
|
+
return u.observe(f), () => {
|
|
21
21
|
u.disconnect();
|
|
22
22
|
};
|
|
23
|
-
}, [
|
|
24
|
-
ref:
|
|
25
|
-
entry:
|
|
26
|
-
inView: !!
|
|
23
|
+
}, [n, r.state, t?.rootMargin, t?.threshold, t?.root, s]), n ? { entry: o, inView: !!o?.isIntersecting } : {
|
|
24
|
+
ref: r,
|
|
25
|
+
entry: o,
|
|
26
|
+
inView: !!o?.isIntersecting
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
y as useIntersectionObserver
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=useIntersectionObserver.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntersectionObserver.mjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n enabled?: boolean;\n root?: HookTarget;\n onChange?: (entry: IntersectionObserverEntry) => void;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n entry?: IntersectionObserverEntry;\n inView: boolean;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Browser\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(ref);\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseIntersectionObserverOptions | undefined;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const internalRef = useRefState<Element>();\n const internalOnChangeRef = useRef<UseIntersectionObserverOptions['onChange']>(
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.mjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n enabled?: boolean;\n root?: HookTarget;\n onChange?: (entry: IntersectionObserverEntry) => void;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n entry?: IntersectionObserverEntry;\n inView: boolean;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n <Target extends Element>(\n callback: (entry: IntersectionObserverEntry) => void,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (\n callback: (entry: IntersectionObserverEntry) => void,\n target: HookTarget\n ): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Browser\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, inView } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entry, inView } = useIntersectionObserver(() => console.log('callback'), ref);\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseIntersectionObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const internalRef = useRefState<Element>();\n const internalOnChangeRef = useRef<UseIntersectionObserverOptions['onChange']>(callback);\n internalOnChangeRef.current = callback;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = target ? getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n setEntry(entry);\n internalOnChangeRef.current?.(entry);\n },\n {\n ...options,\n root: options?.root ? (getElement(options.root) as Document | Element) : document\n }\n );\n\n observer.observe(element as Element);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);\n\n if (target) return { entry, inView: !!entry?.isIntersecting };\n return {\n ref: internalRef,\n entry,\n inView: !!entry?.isIntersecting\n };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","internalRef","useRefState","internalOnChangeRef","useRef","useEffect","element","getElement","observer"],"mappings":";;;;AAqFO,MAAMA,IAA2B,IAAIC,MAAkB;AAC5D,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAOC,CAAQ,IAAIC,EAAA,GAEpBC,IAAcC,EAAA,GACdC,IAAsBC,EAAmDR,CAAQ;AA2BvF,SA1BAO,EAAoB,UAAUP,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACJ,KAAU,CAACQ,EAAY,MAAQ;AAEjD,UAAMK,IAAUb,IAASc,EAAWd,CAAM,IAAIQ,EAAY;AAC1D,QAAI,CAACK,EAAS;AAEd,UAAME,IAAW,IAAI;AAAA,MACnB,CAAC,CAACV,CAAK,MAAM;AACX,QAAAC,EAASD,CAAK,GACdK,EAAoB,UAAUL,CAAK;AAAA,MAAA;AAAA,MAErC;AAAA,QACE,GAAGH;AAAA,QACH,MAAMA,GAAS,OAAQY,EAAWZ,EAAQ,IAAI,IAA2B;AAAA,MAAA;AAAA,IAC3E;AAGF,WAAAa,EAAS,QAAQF,CAAkB,GAE5B,MAAM;AACX,MAAAE,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACf,GAAQQ,EAAY,OAAON,GAAS,YAAYA,GAAS,WAAWA,GAAS,MAAME,CAAO,CAAC,GAE3FJ,IAAe,EAAE,OAAAK,GAAO,QAAQ,CAAC,CAACA,GAAO,eAAA,IACtC;AAAA,IACL,KAAKG;AAAA,IACL,OAAAH;AAAA,IACA,QAAQ,CAAC,CAACA,GAAO;AAAA,EAAA;AAErB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQuery.mjs","sources":["../../../../src/hooks/useQuery/useQuery.ts"],"sourcesContent":["import type { DependencyList } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getRetry } from '@/utils/helpers';\n\nimport { useDidUpdate } from '../useDidUpdate/useDidUpdate';\nimport { useMount } from '../useMount/useMount';\n\n/* The use query return type */\nexport interface UseQueryOptions<QueryData, Data> {\n /* The enabled state of the query */\n enabled?: boolean;\n /* The depends for the hook */\n keys?: DependencyList;\n /* The placeholder data for the hook */\n placeholderData?: (() => Data) | Data;\n /* The refetch interval */\n refetchInterval?: number;\n /* The retry count of requests */\n retry?: boolean | number;\n /* The retry delay of requests */\n retryDelay?: ((retry: number, error: Error) => number) | number;\n /* The callback function to be invoked on error */\n onError?: (error: Error) => void;\n /* The callback function to be invoked on success */\n onSuccess?: (data: Data) => void;\n /* The select function to be invoked */\n select?: (data: QueryData) => Data;\n}\n\ninterface UseQueryCallbackParams {\n /* The depends for the hook */\n keys: DependencyList;\n /* The abort signal */\n signal: AbortSignal;\n}\n\n/* The use query return type */\nexport interface UseQueryReturn<Data> {\n /* The abort function */\n abort: AbortController['abort'];\n /* The state of the query */\n data?: Data;\n /* The success state of the query */\n error?: Error;\n /* The error state of the query */\n isError: boolean;\n /* The fetching state of the query */\n isFetching: boolean;\n /* The loading state of the query */\n isLoading: boolean;\n /* The refetching state of the query */\n isRefetching: boolean;\n /* The success state of the query */\n isSuccess: boolean;\n /* The refetch function */\n refetch: () => void;\n}\n\n/**\n * @name useQuery\n * @description - Hook that defines the logic when query data\n * @category Utilities\n *\n * @template Data The type of the data\n * @param {() => Promise<Data>} callback The callback function to be invoked\n * @param {DependencyList} [options.keys] The dependencies for the hook\n * @param {(data: Data) => void} [options.onSuccess] The callback function to be invoked on success\n * @param {(error: Error) => void} [options.onError] The callback function to be invoked on error\n * @param {UseQueryOptionsSelect<Data>} [options.select] The select function to be invoked\n * @param {Data | (() => Data)} [options.initialData] The initial data for the hook\n * @param {Data | (() => Data)} [options.placeholderData] The placeholder data for the hook\n * @param {number} [options.refetchInterval] The refetch interval\n * @param {boolean | number} [options.retry] The retry count of requests\n * @returns {UseQueryReturn<Data>} An object with the state of the query\n *\n * @example\n * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort, aborted } = useQuery(() => fetch('url'));\n */\nexport const useQuery = <QueryData, Data = QueryData>(\n callback: (params: UseQueryCallbackParams) => Promise<QueryData>,\n options?: UseQueryOptions<QueryData, Data>\n): UseQueryReturn<Data> => {\n const enabled = options?.enabled ?? true;\n const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);\n const alreadyRequested = useRef(false);\n\n const [isFetching, setIsFetching] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [isError, setIsError] = useState(false);\n const [isRefetching, setIsRefetching] = useState(false);\n const [isSuccess, setIsSuccess] = useState(!!options?.placeholderData);\n\n const [error, setError] = useState<Error | undefined>(undefined);\n const [data, setData] = useState<Data | undefined>(options?.placeholderData);\n\n const abortControllerRef = useRef<AbortController>(new AbortController());\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n\n const keys = options?.keys ?? [];\n\n const abort = () => {\n abortControllerRef.current.abort();\n abortControllerRef.current = new AbortController();\n };\n\n const request = (action: 'init' | 'refetch') => {\n abort();\n\n setIsFetching(true);\n if (action === 'init') {\n alreadyRequested.current = true;\n setIsLoading(true);\n }\n if (action === 'refetch') setIsRefetching(true);\n callback({ signal: abortControllerRef.current.signal, keys })\n .then((response) => {\n const data = options?.select ? options?.select(response) : response;\n options?.onSuccess?.(data as Data);\n setData(data as Data);\n setIsSuccess(true);\n setError(undefined);\n setIsError(false);\n setIsFetching(false);\n if (action === 'init') setIsLoading(false);\n if (action === 'refetch') setIsRefetching(false);\n })\n .catch((error: Error) => {\n if (retryCountRef.current > 0) {\n retryCountRef.current -= 1;\n const retryDelay =\n typeof options?.retryDelay === 'function'\n ? options?.retryDelay(retryCountRef.current, error)\n : options?.retryDelay;\n\n if (retryDelay) {\n setTimeout(() => request(action), retryDelay);\n return;\n }\n\n return request(action);\n }\n options?.onError?.(error);\n setData(undefined);\n setIsSuccess(false);\n setError(error);\n setIsError(true);\n setIsFetching(false);\n if (action === 'init') setIsLoading(false);\n if (action === 'refetch') setIsRefetching(false);\n retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;\n })\n .finally(() => {\n if (options?.refetchInterval) {\n const interval = setInterval(() => {\n clearInterval(interval);\n request('refetch');\n }, options?.refetchInterval);\n intervalIdRef.current = interval;\n }\n });\n };\n\n useMount(() => {\n if (!enabled) return;\n request('init');\n });\n\n useDidUpdate(() => {\n if (!enabled) return;\n request(alreadyRequested.current ? 'refetch' : 'init');\n }, [enabled, ...keys]);\n\n useEffect(() => {\n return () => {\n clearInterval(intervalIdRef.current);\n };\n }, [enabled, options?.refetchInterval, options?.retry, ...keys]);\n\n const refetch = () => request('refetch');\n\n return {\n abort,\n data,\n error,\n refetch,\n isFetching,\n isLoading,\n isError,\n isSuccess,\n isRefetching\n };\n};\n"],"names":["useQuery","callback","options","enabled","retryCountRef","useRef","getRetry","alreadyRequested","isFetching","setIsFetching","useState","isLoading","setIsLoading","isError","setIsError","isRefetching","setIsRefetching","isSuccess","setIsSuccess","error","setError","data","setData","abortControllerRef","intervalIdRef","keys","abort","request","action","response","retryDelay","interval","useMount","useDidUpdate","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useQuery.mjs","sources":["../../../../src/hooks/useQuery/useQuery.ts"],"sourcesContent":["import type { DependencyList } from 'react';\r\n\r\nimport { useEffect, useRef, useState } from 'react';\r\n\r\nimport { getRetry } from '@/utils/helpers';\r\n\r\nimport { useDidUpdate } from '../useDidUpdate/useDidUpdate';\r\nimport { useMount } from '../useMount/useMount';\r\n\r\n/* The use query return type */\r\nexport interface UseQueryOptions<QueryData, Data> {\r\n /* The enabled state of the query */\r\n enabled?: boolean;\r\n /* The depends for the hook */\r\n keys?: DependencyList;\r\n /* The placeholder data for the hook */\r\n placeholderData?: (() => Data) | Data;\r\n /* The refetch interval */\r\n refetchInterval?: number;\r\n /* The retry count of requests */\r\n retry?: boolean | number;\r\n /* The retry delay of requests */\r\n retryDelay?: ((retry: number, error: Error) => number) | number;\r\n /* The callback function to be invoked on error */\r\n onError?: (error: Error) => void;\r\n /* The callback function to be invoked on success */\r\n onSuccess?: (data: Data) => void;\r\n /* The select function to be invoked */\r\n select?: (data: QueryData) => Data;\r\n}\r\n\r\ninterface UseQueryCallbackParams {\r\n /* The depends for the hook */\r\n keys: DependencyList;\r\n /* The abort signal */\r\n signal: AbortSignal;\r\n}\r\n\r\n/* The use query return type */\r\nexport interface UseQueryReturn<Data> {\r\n /* The abort function */\r\n abort: AbortController['abort'];\r\n /* The state of the query */\r\n data?: Data;\r\n /* The success state of the query */\r\n error?: Error;\r\n /* The error state of the query */\r\n isError: boolean;\r\n /* The fetching state of the query */\r\n isFetching: boolean;\r\n /* The loading state of the query */\r\n isLoading: boolean;\r\n /* The refetching state of the query */\r\n isRefetching: boolean;\r\n /* The success state of the query */\r\n isSuccess: boolean;\r\n /* The refetch function */\r\n refetch: () => void;\r\n}\r\n\r\n/**\r\n * @name useQuery\r\n * @description - Hook that defines the logic when query data\r\n * @category Utilities\r\n *\r\n * @template Data The type of the data\r\n * @param {() => Promise<Data>} callback The callback function to be invoked\r\n * @param {DependencyList} [options.keys] The dependencies for the hook\r\n * @param {(data: Data) => void} [options.onSuccess] The callback function to be invoked on success\r\n * @param {(error: Error) => void} [options.onError] The callback function to be invoked on error\r\n * @param {UseQueryOptionsSelect<Data>} [options.select] The select function to be invoked\r\n * @param {Data | (() => Data)} [options.initialData] The initial data for the hook\r\n * @param {Data | (() => Data)} [options.placeholderData] The placeholder data for the hook\r\n * @param {number} [options.refetchInterval] The refetch interval\r\n * @param {boolean | number} [options.retry] The retry count of requests\r\n * @returns {UseQueryReturn<Data>} An object with the state of the query\r\n *\r\n * @example\r\n * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort, aborted } = useQuery(() => fetch('url'));\r\n */\r\nexport const useQuery = <QueryData, Data = QueryData>(\r\n callback: (params: UseQueryCallbackParams) => Promise<QueryData>,\r\n options?: UseQueryOptions<QueryData, Data>\r\n): UseQueryReturn<Data> => {\r\n const enabled = options?.enabled ?? true;\r\n const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);\r\n const alreadyRequested = useRef(false);\r\n\r\n const [isFetching, setIsFetching] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n const [isRefetching, setIsRefetching] = useState(false);\r\n const [isSuccess, setIsSuccess] = useState(!!options?.placeholderData);\r\n\r\n const [error, setError] = useState<Error | undefined>(undefined);\r\n const [data, setData] = useState<Data | undefined>(options?.placeholderData);\r\n\r\n const abortControllerRef = useRef<AbortController>(new AbortController());\r\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\r\n\r\n const keys = options?.keys ?? [];\r\n\r\n const abort = () => {\r\n abortControllerRef.current.abort();\r\n abortControllerRef.current = new AbortController();\r\n };\r\n\r\n const request = (action: 'init' | 'refetch') => {\r\n abort();\r\n\r\n setIsFetching(true);\r\n if (action === 'init') {\r\n alreadyRequested.current = true;\r\n setIsLoading(true);\r\n }\r\n if (action === 'refetch') setIsRefetching(true);\r\n callback({ signal: abortControllerRef.current.signal, keys })\r\n .then((response) => {\r\n const data = options?.select ? options?.select(response) : response;\r\n options?.onSuccess?.(data as Data);\r\n setData(data as Data);\r\n setIsSuccess(true);\r\n setError(undefined);\r\n setIsError(false);\r\n setIsFetching(false);\r\n if (action === 'init') setIsLoading(false);\r\n if (action === 'refetch') setIsRefetching(false);\r\n })\r\n .catch((error: Error) => {\r\n if (retryCountRef.current > 0) {\r\n retryCountRef.current -= 1;\r\n const retryDelay =\r\n typeof options?.retryDelay === 'function'\r\n ? options?.retryDelay(retryCountRef.current, error)\r\n : options?.retryDelay;\r\n\r\n if (retryDelay) {\r\n setTimeout(() => request(action), retryDelay);\r\n return;\r\n }\r\n\r\n return request(action);\r\n }\r\n options?.onError?.(error);\r\n setData(undefined);\r\n setIsSuccess(false);\r\n setError(error);\r\n setIsError(true);\r\n setIsFetching(false);\r\n if (action === 'init') setIsLoading(false);\r\n if (action === 'refetch') setIsRefetching(false);\r\n retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;\r\n })\r\n .finally(() => {\r\n if (options?.refetchInterval) {\r\n const interval = setInterval(() => {\r\n clearInterval(interval);\r\n request('refetch');\r\n }, options?.refetchInterval);\r\n intervalIdRef.current = interval;\r\n }\r\n });\r\n };\r\n\r\n useMount(() => {\r\n if (!enabled) return;\r\n request('init');\r\n });\r\n\r\n useDidUpdate(() => {\r\n if (!enabled) return;\r\n request(alreadyRequested.current ? 'refetch' : 'init');\r\n }, [enabled, ...keys]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n clearInterval(intervalIdRef.current);\r\n };\r\n }, [enabled, options?.refetchInterval, options?.retry, ...keys]);\r\n\r\n const refetch = () => request('refetch');\r\n\r\n return {\r\n abort,\r\n data,\r\n error,\r\n refetch,\r\n isFetching,\r\n isLoading,\r\n isError,\r\n isSuccess,\r\n isRefetching\r\n };\r\n};\r\n"],"names":["useQuery","callback","options","enabled","retryCountRef","useRef","getRetry","alreadyRequested","isFetching","setIsFetching","useState","isLoading","setIsLoading","isError","setIsError","isRefetching","setIsRefetching","isSuccess","setIsSuccess","error","setError","data","setData","abortControllerRef","intervalIdRef","keys","abort","request","action","response","retryDelay","interval","useMount","useDidUpdate","useEffect"],"mappings":"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"}
|
|
@@ -16,6 +16,10 @@ export interface UseIntersectionObserver {
|
|
|
16
16
|
ref: StateRef<Target>;
|
|
17
17
|
};
|
|
18
18
|
(target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;
|
|
19
|
+
<Target extends Element>(callback: (entry: IntersectionObserverEntry) => void, target?: never): UseIntersectionObserverReturn & {
|
|
20
|
+
ref: StateRef<Target>;
|
|
21
|
+
};
|
|
22
|
+
(callback: (entry: IntersectionObserverEntry) => void, target: HookTarget): UseIntersectionObserverReturn;
|
|
19
23
|
}
|
|
20
24
|
/**
|
|
21
25
|
* @name useIntersectionObserver
|
|
@@ -28,7 +32,7 @@ export interface UseIntersectionObserver {
|
|
|
28
32
|
* @param {HookTarget} target The target element to detect intersection
|
|
29
33
|
* @param {boolean} [options.enabled=true] The IntersectionObserver options
|
|
30
34
|
* @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
|
|
31
|
-
* @param {HookTarget} [options.root] The root element to observe
|
|
35
|
+
* @param {HookTarget} [options.root=document] The root element to observe
|
|
32
36
|
* @returns {UseIntersectionObserverReturn} An object containing the state
|
|
33
37
|
*
|
|
34
38
|
* @example
|
|
@@ -38,10 +42,26 @@ export interface UseIntersectionObserver {
|
|
|
38
42
|
* @template Target The target element
|
|
39
43
|
* @param {boolean} [options.enabled=true] The IntersectionObserver options
|
|
40
44
|
* @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
|
|
41
|
-
* @param {HookTarget} [options.root] The root element to observe
|
|
45
|
+
* @param {HookTarget} [options.root=document] The root element to observe
|
|
42
46
|
* @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
|
|
43
47
|
*
|
|
44
48
|
* @example
|
|
45
49
|
* const { entry, inView } = useIntersectionObserver(ref);
|
|
50
|
+
*
|
|
51
|
+
* @overload
|
|
52
|
+
* @template Target The target element
|
|
53
|
+
* @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected
|
|
54
|
+
* @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const { ref, entry, inView } = useIntersectionObserver(() => console.log('callback'));
|
|
58
|
+
*
|
|
59
|
+
* @overload
|
|
60
|
+
* @param {(entry: IntersectionObserverEntry) => void} callback The callback to execute when intersection is detected
|
|
61
|
+
* @param {HookTarget} target The target element to detect intersection
|
|
62
|
+
* @returns {UseIntersectionObserverReturn} An object containing the state
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* const { entry, inView } = useIntersectionObserver(() => console.log('callback'), ref);
|
|
46
66
|
*/
|
|
47
67
|
export declare const useIntersectionObserver: UseIntersectionObserver;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@siberiacancode/reactuse",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.15",
|
|
4
4
|
"description": "The ultimate collection of react hooks",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "SIBERIA CAN CODE 🧊",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"lint-staged": "lint-staged"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@types/react": "^
|
|
55
|
-
"react": "^
|
|
56
|
-
"react-dom": "^
|
|
54
|
+
"@types/react": "^18 || ^19",
|
|
55
|
+
"react": "^18 || ^19",
|
|
56
|
+
"react-dom": "^18 || ^19"
|
|
57
57
|
},
|
|
58
58
|
"peerDependenciesMeta": {
|
|
59
59
|
"@types/react": {
|