-
- - Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| useDefer.ts | -
-
- |
- 100% | -47/47 | -100% | -4/4 | -100% | -1/1 | -100% | -47/47 | -
| useFetch.ts | -
-
- |
- 100% | -131/131 | -100% | -29/29 | -100% | -1/1 | -100% | -131/131 | -
| useFirstRender.ts | -
-
- |
- 100% | -32/32 | -100% | -2/2 | -100% | -1/1 | -100% | -32/32 | -
| useIntersectionObserver.ts | -
-
- |
- 100% | -69/69 | -100% | -4/4 | -100% | -2/2 | -100% | -69/69 | -
| useIntersectionObserverArray.ts | -
-
- |
- 100% | -87/87 | -100% | -11/11 | -100% | -2/2 | -100% | -87/87 | -
| useToggle.ts | -
-
- |
- 100% | -32/32 | -100% | -3/3 | -100% | -1/1 | -100% | -32/32 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -5x -5x -5x -2x -1x -1x -1x -2x -1x -2x -5x -5x -5x -1x -1x | import {useEffect, useState} from "react";
-
-/**
- * Delays the update of a value until the input has stopped changing for a certain time. This is different
- * from React's builtin useDeferredValue because you can set the delay yourself.
- *
- * @param input The value to defer and output.
- * @param delay The amount of time to wait after input has stopped changing before outputting it.
- *
- * @return The deferred input value.
- *
- * @example
- * ```tsx
- * const DemoUseDefer = () => {
- * const [value, setValue] = useState("");
- * const displayValue = useDefer(value, 500);
- * return (
- * <div>
- * <input
- * type="text"
- * value={value}
- * onInput={(e) => setValue((e.target as HTMLInputElement).value)}
- * />
- * <ul>
- * {displayValue}
- * </ul>
- * </div>
- * );
- * };
- * ```
- */
-const useDefer = <T = any>(input: T, delay: number): T => {
- const [state, setState] = useState(input);
- const [timeoutState, setTimeoutState] = useState<NodeJS.Timeout | undefined>(undefined);
- useEffect(() => {
- if (timeoutState) {
- clearTimeout(timeoutState);
- setTimeoutState(undefined);
- }
- setTimeoutState(setTimeout(() => {
- setState(input);
- }, delay));
- }, [input, delay]);
- return state;
-}
-
-export default useDefer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -118x -15x -118x -118x -118x -41x -41x -41x -41x -41x -41x -41x -41x -41x -41x -41x -41x -41x -12x -6x -6x -3x -3x -3x -3x -2x -1x -3x -3x -1x -3x -2x -2x -2x -2x -41x -28x -28x -27x -27x -28x -40x -41x -41x -41x -41x -41x -39x -39x -39x -39x -118x -118x -118x -1x -1x | import {useEffect, useState} from "react";
-
-export type FetchResult = {
- /** The response to the fetch request. Type depends on selected parseType. Is undefined if fetch was unsuccessful. */
- data: any,
- /** Indicates if the fetch is still ongoing (i.e. has not finished). Wait for this to be true before reading other
- * fields. Is useful to display a spinner while waiting for results. */
- loading: boolean,
- /** Indicates whether the response was successful (status in the range 200-299) or not. */
- ok: boolean,
- /** The HTTP status code. Is undefined before first fetch has completed. */
- status: number | undefined
-};
-
-export type FetchOptions = {
- /** How to parse the result (determines type of returned data). Set to "response" if you
- * don't want to extract the data automatically and receive the response object instead. */
- parseType?: "json" | "html" | "xml" | "text" | "svg" | "response",
- /** The options passed to the fetch function. Note: custom signals will be overwritten internally. */
- requestOptions?: RequestInit,
- /** Discards all responses except the last one made. This prevents
- * flickering of data in the UI and ensures only the correct data is displayed. Only turn this off if you're really
- * sure you want to. */
- discardStaleRequests?: boolean,
- /** A callback function that takes the number of attempted retries and returns the amount of seconds to wait before
- * attempting to fetch again. A common retry method would return 2^(attempt). If set to undefined, does not attempt
- * to re-fetch on failure. If the function returns undefined, it stops the hook from re-fetching again until an
- * input parameter to the hook changes and resets the internal retry counter.*/
- retryTimeout?: (attempt: number) => number | undefined,
-};
-
-/**
- * Fetches the provided URL and optionally parses the response. Aborts requests when a new request is
- * started before the previous has finished to prevent flickering of stale responses by default.
- *
- * @param url - The resource to fetch
- * @param {FetchOptions} options - Allows you to configure how useFetch makes and returns requests
- * @return FetchResult - An object containing information about the result of a fetch request
- *
- * @example
- * ```tsx
- * const DemoUseFetch = () => {
- * const [value, setValue] = useState("");
- * const {loading, data} = useFetch("https://api.artic.edu/api/v1/artworks/search?q=" + encodeURIComponent(value));
- * const list = data?.data.map((e, i) => <li key={i}>{e.title}</li>)
- * return (
- * <div>
- * <input
- * type="text"
- * value={value}
- * onInput={(e) => setValue((e.target as HTMLInputElement).value)}
- * />
- * <ul>
- * {loading ? "LOADING..." : list}
- * </ul>
- * </div>
- * );
- * };
- * ```
- */
-const useFetch = (
- url: string,
- {
- parseType = "json",
- requestOptions = {},
- discardStaleRequests = true,
- retryTimeout = undefined,
- }: FetchOptions = {},
-): FetchResult => {
- const [status, setStatus] = useState<number>();
- const [ok, setOk] = useState<boolean>(false);
- const [loading, setLoading] = useState<boolean>(false);
- const [data, setData] = useState<any>(undefined);
- const [retries, setRetries] = useState(1);
-
- useEffect(() => {
- setRetries(1);
- }, [url, parseType, discardStaleRequests, retryTimeout]);
-
- useEffect(() => {
- const abortController = new AbortController();
- const { signal } = abortController;
- (async () => {
- setLoading(true);
- try {
- const response = await fetch(url, discardStaleRequests
- ? { ...requestOptions, signal }
- : requestOptions
- );
- setStatus(response.status);
- setOk(response.ok);
- let res = undefined;
- if (response.ok) {
- if (parseType === "json") {
- res = await response.json();
- } else if (parseType === "html" || parseType === "xml" || parseType === "svg") {
- const html = await response.text();
- const parser = new DOMParser();
- res = parser.parseFromString(html,
- parseType === "html" ? "text/html" :
- parseType === "svg" ? "image/svg+xml" :
- "text/xml"
- );
- } else if (parseType === "text") {
- res = await response.text();
- } else {
- if (parseType !== "response")
- console.error("Unknown parse type: '" + parseType + "'\nReturned 'response' instead.");
- res = response;
- }
- } else if (typeof retryTimeout === "function") {
- const timeoutLength = retryTimeout(retries);
- if (typeof timeoutLength === "number") {
- setTimeout(() => setRetries(prevState => prevState + 1), timeoutLength);
- }
- }
- setData(res);
- } catch { } finally {
- setLoading(false);
- }
- })();
- if (discardStaleRequests) {
- return () => {
- abortController.abort();
- };
- }
- }, [url, parseType, retries, discardStaleRequests, retryTimeout]);
- return {data, loading, ok, status};
-};
-
-export default useFetch; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x - | import { useRef } from 'react';
-
-
-/**
- * @return true on first render; false otherwise.
- *
- * @example
- * ```tsx
- * const DemoUseFirstRender = () => {
- * const isFirstRender = useFirstRender();
- * const [count, setCount] = useState(0);
- * if (isFirstRender) setCount(count => count + 1);
- * return (
- * <h1>
- * {count}
- * </h1>
- * );
- * };
- * ```
- */
-function useFirstRender() {
- const isFirstRender = useRef(true);
-
- if (isFirstRender.current) {
- isFirstRender.current = false;
- return true;
- }
-
- return false;
-}
-
-export default useFirstRender;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -2x -2x -2x -2x -2x -2x -2x -2x -3x -3x -3x -1x -1x | import {RefObject, useEffect, useRef, useState} from "react";
-
-export type IntersectionObserverOptions = {
- /** An Element or Document object which is an ancestor of the intended target, whose bounding rectangle
- * will be considered the viewport. Any part of the target not visible in the visible area of the root is not considered
- * visible. Default is null. Setting the root to null, makes the hook observe intersections with the viewport. */
- root?: Element | Document | null,
- /** A string which specifies a set of offsets to add to the root's bounding_box when
- * calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is
- * approximately the same as that for the CSS margin property; see The intersection root and root margin for more
- * information on how the margin works and the syntax. The default is "0px 0px 0px 0px".*/
- rootMargin?: string,
-
- /** Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of
- * intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible
- * pixel counts as the target being visible. 1.0 means that the entire target element is visible. See Thresholds for a
- * more in-depth description of how thresholds are used. The default is a threshold of 0.0. */
- threshold?: number | number[],
-};
-
-/**
- * Provides a hook API that wraps the IntersectionObserver API. This hook is for use with a single element only. For
- * simplicity this is the recommended approach. If you have an extremely large number of objects to observe and want
- * to avoid creating an IntersectionObserver for each, refer to useIntersectionObserverArray to use a single observer
- * for multiple elements with a common root.
- *
- * @return An array whose first value is a ref you need to attach to the element to observe. The second value is an
- * IntersectionObserverEntry as described by the IntersectionObserver API. This value is initially null but updates
- * every time there is a change in the intersection.
- *
- * @example
- * ```tsx
- * const DemoUseIntersectionObserver = () => {
- * const [ref, entry] = useIntersectionObserver<HTMLDivElement>();
- * return (
- * <>
- * <h1 style={{color: entry?.isIntersecting ? "green" : "red", position: "fixed", left: 0, top: 0}}>
- * The div is {entry?.isIntersecting ? "" : "not"} in view.
- * </h1>
- *
- * <div ref={ref} style={{marginTop: "200vh", backgroundColor: "red"}}>
- * Hello, world!
- * </div>
- * </>
- * );
- * };
- * ```
- */
-function useIntersectionObserver<T extends Element>({
- root = null,
- rootMargin = "0px 0px 0px 0px",
- threshold = 1.0,
-}: IntersectionObserverOptions = {}): [RefObject<T>, IntersectionObserverEntry | null] {
- const ref = useRef<T | null>(null);
- const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
- useEffect(() => {
- if (ref.current) {
- const observer = new IntersectionObserver(
- (e) => setEntry(e[0]),
- { root, rootMargin, threshold },
- );
- observer.observe(ref.current as T);
- return () => observer.disconnect();
- }
- }, [ref, root, rootMargin, threshold]);
- return [ref, entry];
-}
-
-export default useIntersectionObserver; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -4x -4x -4x -4x -4x -4x -4x -4x -4x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -4x -4x -4x -1x -1x | import {RefObject, useEffect, useRef, useState} from "react";
-import {IntersectionObserverOptions} from "./useIntersectionObserver";
-
-export type IntersectionObserverArrayOptions = IntersectionObserverOptions & {
- /** If set to true (default), the returned entries always contain the last
- * intersection change that happened for each element. If set to false, only the recently updated intersections are
- * contained in the return value and the rest is set to null. If you want to test if multiple element are on screen,
- * leave this value as default as this will tell where each element was last seen (on-screen or off-screen). */
- alwaysShowLastIntersection?: boolean;
-}
-
-/**
- * Provides a hook API that wraps the IntersectionObserver API for observing intersections of multiple elements with a
- * common root. This hook is for use with a single element only. If you have an extremely large number of objects to
- * observe and want to avoid creating an IntersectionObserver for each, or you don't know how many objects you will be
- * observing beforehand, use this. Otherwise, it may be better to use useIntersectionObserver for each component for
- * simplicity and clarity.
- *
- * This hook provides a convenient API for return values. Normally the IntersectionObserver API only returns the
- * entries that changed, so you have to figure out which elements they belong to. However, useIntersectionObserverArray
- * returns an array of the same length as the ref array containing the elements to observe.
- *
- * @return An array whose first value is an array ref you need to attach to the elements to observe. When adding
- * elements to the ref make sure to only add them once (avoid using Array.push). The second value is an
- * array of IntersectionObserverEntries as described by the IntersectionObserver API. This value is an empty array on
- * first render but afterward contains one value for each element in the ref. The index of items in the ref corresponds
- * to the index of entries returned. By default, each entry is an IntersectionObserverEntry (i.e. the last one that
- * happened for the element at the given index). When alwaysShowLastIntersection is set to false, only the
- * IntersectionObserverEntries are returned that triggered the change of the return value. The rest is set to null.
- *
- * @example
- * ```tsx
- * const DemoUseIntersectionObserverArray = () => {
- * const [ref, entries] = useIntersectionObserverArray<HTMLDivElement>();
- * const allInView = useMemo(
- * () => entries.length > 0 && entries.every(x => x?.isIntersecting),
- * [entries],
- * );
- * return (
- * <>
- * <div ref={el => {
- * if (el) ref.current[0] = el;
- * }}>Hello, world!</div>
- * <div ref={el => {
- * if (el) ref.current[1] = el;
- * }}>Hello, world!</div>
- * </>
- * );
- * };
- * ```
- */
-function useIntersectionObserverArray<T extends Element>({
- root = null,
- rootMargin = "0px 0px 0px 0px",
- threshold = 1.0,
- alwaysShowLastIntersection = true,
-}: IntersectionObserverArrayOptions = {}): [RefObject<T[]>, (IntersectionObserverEntry | null)[]] {
- const ref = useRef<T[]>([]);
- const [entries, setEntries] = useState<(IntersectionObserverEntry | null)[]>([]);
- useEffect(() => {
- if (ref.current) {
- const observer = new IntersectionObserver(
- (e) => {
- setEntries(prevState => {
- const newEntries = prevState.length === 0 || !alwaysShowLastIntersection
- ? Array.from({length: ref.current.length}, () => null)
- : [...prevState];
- e.forEach((e_) => {
- const target = e_.target;
- const index = ref.current.indexOf(target as T);
- if (index > -1) {
- newEntries[index] = e_;
- }
- });
- return newEntries;
- });
- },
- { root, rootMargin, threshold },
- );
- ref.current.forEach(r => observer.observe(r));
- return () => observer.disconnect();
- }
- }, [ref, root, rootMargin, threshold]);
- return [ref, entries];
-}
-
-export default useIntersectionObserverArray; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -1x -1x | import { useState, useCallback } from 'react';
-
-
-/**
- * Provides a boolean toggle that does not persist between page reloads.
- *
- * @param [initialValue = false] The initial value of the toggle.
- *
- * @return The current state of the toggle.
- *
- * @example
- * ```tsx
- * const DemoUseToggle = () => {
- * const [state, toggle] = useToggle();
- * return (
- * <>
- * <h1>
- * My favorite color is: {state ? "green" : "red"}
- * </h1>
- * <button onClick={toggle}>Change Opinion</button>
- * </>
- * );
- * };
- * ```
- */
-function useToggle(initialValue: boolean = false): [boolean, () => void] {
- const [value, setValue] = useState(initialValue);
- const toggle = useCallback(() => setValue(v => !v), []);
- return [value, toggle];
-}
-
-export default useToggle; |
Fetches the provided URL and optionally parses the response. Aborts requests when a new request is +started before the previous has finished to prevent flickering of stale responses by default.
+const DemoUseFetch = () => {
const [value, setValue] = useState("");
const {loading, data} = useFetch("https://api.artic.edu/api/v1/artworks/search?q=" + encodeURIComponent(value));
const list = data?.data.map((e, i) => <li key={i}>{e.title}</li>)
return (
<div>
<input
type="text"
value={value}
onInput={(e) => setValue((e.target as HTMLInputElement).value)}
/>
<ul>
{loading ? "LOADING..." : list}
</ul>
</div>
);
};
+The resource to fetch
+Allows you to configure how useFetch makes and returns requests
+FetchResult - An object containing information about the result of a fetch request
+Provides a hook API that wraps the IntersectionObserver API. This hook is for use with a single element only. For +simplicity this is the recommended approach. If you have an extremely large number of objects to observe and want +to avoid creating an IntersectionObserver for each, refer to useIntersectionObserverArray to use a single observer +for multiple elements with a common root.
+An array whose first value is a ref you need to attach to the element to observe. The second value is an +IntersectionObserverEntry as described by the IntersectionObserver API. This value is initially null but updates +every time there is a change in the intersection.
+const DemoUseIntersectionObserver = () => {
const [ref, entry] = useIntersectionObserver<HTMLDivElement>();
return (
<>
<h1 style={{color: entry?.isIntersecting ? "green" : "red", position: "fixed", left: 0, top: 0}}>
The div is {entry?.isIntersecting ? "" : "not"} in view.
</h1>
<div ref={ref} style={{marginTop: "200vh", backgroundColor: "red"}}>
Hello, world!
</div>
</>
);
};
+Provides a hook API that wraps the IntersectionObserver API for observing intersections of multiple elements with a +common root. This hook is for use with a single element only. If you have an extremely large number of objects to +observe and want to avoid creating an IntersectionObserver for each, or you don't know how many objects you will be +observing beforehand, use this. Otherwise, it may be better to use useIntersectionObserver for each component for +simplicity and clarity.
+This hook provides a convenient API for return values. Normally the IntersectionObserver API only returns the +entries that changed, so you have to figure out which elements they belong to. However, useIntersectionObserverArray +returns an array of the same length as the ref array containing the elements to observe.
+An array whose first value is an array ref you need to attach to the elements to observe. When adding +elements to the ref make sure to only add them once (avoid using Array.push). The second value is an +array of IntersectionObserverEntries as described by the IntersectionObserver API. This value is an empty array on +first render but afterward contains one value for each element in the ref. The index of items in the ref corresponds +to the index of entries returned. By default, each entry is an IntersectionObserverEntry (i.e. the last one that +happened for the element at the given index). When alwaysShowLastIntersection is set to false, only the +IntersectionObserverEntries are returned that triggered the change of the return value. The rest is set to null.
+const DemoUseIntersectionObserverArray = () => {
const [ref, entries] = useIntersectionObserverArray<HTMLDivElement>();
const allInView = useMemo(
() => entries.length > 0 && entries.every(x => x?.isIntersecting),
[entries],
);
return (
<>
<div ref={el => {
if (el) ref.current[0] = el;
}}>Hello, world!</div>
<div ref={el => {
if (el) ref.current[1] = el;
}}>Hello, world!</div>
</>
);
};
+
+ 
Anzol provides very useful React hooks for very common tasks such as data fetching +or deferring the updating of values with a custom timeout. You can find working examples in the +documentation or if you just want the code in the examples/components +directory.
+Anzol is built alongside automated tests to ensure quality.
+Anzol is available on the NPM registry. To install it, just run:
+
npm install anzol
+These features are not yet implement but we plan to do so in the foreseeable future. Feel free to make your own +suggestions.
+OptionaldiscardDiscards all responses except the last one made. This prevents +flickering of data in the UI and ensures only the correct data is displayed. Only turn this off if you're really +sure you want to.
+OptionalparseHow to parse the result (determines type of returned data). Set to "response" if you +don't want to extract the data automatically and receive the response object instead.
+OptionalrequestThe options passed to the fetch function. Note: custom signals will be overwritten internally.
+OptionalretryA callback function that takes the number of attempted retries and returns the amount of seconds to wait before +attempting to fetch again. A common retry method would return 2^(attempt). If set to undefined, does not attempt +to re-fetch on failure. If the function returns undefined, it stops the hook from re-fetching again until an +input parameter to the hook changes and resets the internal retry counter.
+The response to the fetch request. Type depends on selected parseType. Is undefined if fetch was unsuccessful.
+Indicates if the fetch is still ongoing (i.e. has not finished). Wait for this to be true before reading other +fields. Is useful to display a spinner while waiting for results.
+Indicates whether the response was successful (status in the range 200-299) or not.
+The HTTP status code. Is undefined before first fetch has completed.
+OptionalrootAn Element or Document object which is an ancestor of the intended target, whose bounding rectangle +will be considered the viewport. Any part of the target not visible in the visible area of the root is not considered +visible. Default is null. Setting the root to null, makes the hook observe intersections with the viewport.
+OptionalrootA string which specifies a set of offsets to add to the root's bounding_box when +calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is +approximately the same as that for the CSS margin property; see The intersection root and root margin for more +information on how the margin works and the syntax. The default is "0px 0px 0px 0px".
+OptionalthresholdEither a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of +intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible +pixel counts as the target being visible. 1.0 means that the entire target element is visible. See Thresholds for a +more in-depth description of how thresholds are used. The default is a threshold of 0.0.
+OptionalalwaysIf set to true (default), the returned entries always contain the last +intersection change that happened for each element. If set to false, only the recently updated intersections are +contained in the return value and the rest is set to null. If you want to test if multiple element are on screen, +leave this value as default as this will tell where each element was last seen (on-screen or off-screen).
+
Delays the update of a value until the input has stopped changing for a certain time. This is different +from React's builtin useDeferredValue because you can set the delay yourself.
+