extra-react-hooks 0.6.2 → 0.6.4

package/lib/use-multiple-selection.js

@@ -1,50 +1,50 @@
-import { useState, useMemo, useCallback } from 'react';
-import { assert, toArray } from '@blackglory/prelude';
-import { useIIFE } from "./use-iife.js";
-export function useMultipleSelection(options, defaultSelectedIndexes = []) {
-    useIIFE(() => {
-        for (const index of defaultSelectedIndexes) {
-            assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
-        }
-    }, [defaultSelectedIndexes]);
-    const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
-    return {
-        selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
-        optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
-        toggle: useCallback(toggle, [selectedIndexes]),
-        select: useCallback(select, []),
-        unselect: useCallback(unselect, [])
-    };
-    function createOptionStates() {
-        return options.map((_, index) => {
-            const selected = isSelected(index);
-            return { selected };
-        });
-    }
-    function isSelected(index) {
-        return selectedIndexes.has(index);
-    }
-    function toggle(index) {
-        if (isSelected(index)) {
-            unselect(index);
-        }
-        else {
-            select(index);
-        }
-    }
-    function select(index) {
-        setSelectedIndexes(selectedIndexes => {
-            const result = new Set(selectedIndexes);
-            result.add(index);
-            return result;
-        });
-    }
-    function unselect(index) {
-        setSelectedIndexes(selectedIndexes => {
-            const result = new Set(selectedIndexes);
-            result.delete(index);
-            return result;
-        });
-    }
-}
+import { useState, useMemo, useCallback } from 'react';
+import { assert, toArray } from '@blackglory/prelude';
+import { useIIFE } from "./use-iife.js";
+export function useMultipleSelection(options, defaultSelectedIndexes = []) {
+    useIIFE(() => {
+        for (const index of defaultSelectedIndexes) {
+            assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
+        }
+    }, [defaultSelectedIndexes]);
+    const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
+    return {
+        selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
+        optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
+        toggle: useCallback(toggle, [selectedIndexes]),
+        select: useCallback(select, []),
+        unselect: useCallback(unselect, [])
+    };
+    function createOptionStates() {
+        return options.map((_, index) => {
+            const selected = isSelected(index);
+            return { selected };
+        });
+    }
+    function isSelected(index) {
+        return selectedIndexes.has(index);
+    }
+    function toggle(index) {
+        if (isSelected(index)) {
+            unselect(index);
+        }
+        else {
+            select(index);
+        }
+    }
+    function select(index) {
+        setSelectedIndexes(selectedIndexes => {
+            const result = new Set(selectedIndexes);
+            result.add(index);
+            return result;
+        });
+    }
+    function unselect(index) {
+        setSelectedIndexes(selectedIndexes => {
+            const result = new Set(selectedIndexes);
+            result.delete(index);
+            return result;
+        });
+    }
+}
 //# sourceMappingURL=use-multiple-selection.js.map

package/lib/use-render-counter.d.ts

@@ -1 +1 @@
-export declare function useRenderCounter(): number;
+export declare function useRenderCounter(): number;

package/lib/use-render-counter.js

@@ -1,7 +1,7 @@
-import { useRef } from 'react';
-export function useRenderCounter() {
-    const counter = useRef(0);
-    counter.current++;
-    return counter.current;
-}
+import { useRef } from 'react';
+export function useRenderCounter() {
+    const counter = useRef(0);
+    counter.current++;
+    return counter.current;
+}
 //# sourceMappingURL=use-render-counter.js.map

package/lib/use-resize-observer.d.ts

@@ -1,2 +1,2 @@
-import { RefObject, MutableRefObject } from 'react';
-export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
+import { RefObject, MutableRefObject } from 'react';
+export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;

package/lib/use-resize-observer.js

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
-import { isntNull } from '@blackglory/prelude';
-export function useResizeObserver(callback, refs) {
-    const deps = refs.map(x => x.current);
-    useEffect(() => {
-        const observer = new ResizeObserver(callback);
-        refs
-            .map(x => x.current)
-            .filter(isntNull)
-            .forEach(x => observer.observe(x));
-        return () => observer.disconnect();
-    }, deps);
-}
+import { useEffect } from 'react';
+import { isntNull } from '@blackglory/prelude';
+export function useResizeObserver(callback, refs) {
+    const deps = refs.map(x => x.current);
+    useEffect(() => {
+        const observer = new ResizeObserver(callback);
+        refs
+            .map(x => x.current)
+            .filter(isntNull)
+            .forEach(x => observer.observe(x));
+        return () => observer.disconnect();
+    }, deps);
+}
 //# sourceMappingURL=use-resize-observer.js.map

package/lib/use-single-selection.d.ts

@@ -1,7 +1,7 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-import { IOptionState } from "./types.js";
-export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
-    selectedIndex: number;
-    optionStates: IOptionState[];
-    select: (index: number) => void;
-};
+import { NonEmptyArray } from '@blackglory/prelude';
+import { IOptionState } from "./types.js";
+export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
+    selectedIndex: number;
+    optionStates: IOptionState[];
+    select: (index: number) => void;
+};

package/lib/use-single-selection.js

@@ -1,23 +1,23 @@
-import { useState, useMemo, useCallback } from 'react';
-import { assert } from '@blackglory/prelude';
-import { useIIFE } from "./use-iife.js";
-export function useSingleSelection(options, defaultSelectedIndex) {
-    useIIFE(() => {
-        assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
-    }, [defaultSelectedIndex]);
-    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
-    return {
-        selectedIndex,
-        optionStates: useMemo(createOptionStates, [options, selectedIndex]),
-        select: useCallback(select, [])
-    };
-    function createOptionStates() {
-        return options.map((_, index) => ({
-            selected: index === selectedIndex
-        }));
-    }
-    function select(index) {
-        setSelectedIndex(index);
-    }
-}
+import { useState, useMemo, useCallback } from 'react';
+import { assert } from '@blackglory/prelude';
+import { useIIFE } from "./use-iife.js";
+export function useSingleSelection(options, defaultSelectedIndex) {
+    useIIFE(() => {
+        assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
+    }, [defaultSelectedIndex]);
+    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
+    return {
+        selectedIndex,
+        optionStates: useMemo(createOptionStates, [options, selectedIndex]),
+        select: useCallback(select, [])
+    };
+    function createOptionStates() {
+        return options.map((_, index) => ({
+            selected: index === selectedIndex
+        }));
+    }
+    function select(index) {
+        setSelectedIndex(index);
+    }
+}
 //# sourceMappingURL=use-single-selection.js.map

package/lib/use-state-cycle.d.ts

@@ -1,2 +1,2 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];
+import { NonEmptyArray } from '@blackglory/prelude';
+export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];

package/lib/use-state-cycle.js

@@ -1,16 +1,16 @@
-import { useState, useCallback } from 'react';
-export function useStateCycle(orderedStates, initialStateIndex = 0) {
-    const [index, setIndex] = useState(initialStateIndex);
-    return [orderedStates[index], useCallback(next, [orderedStates])];
-    function next() {
-        setIndex(index => {
-            if (index + 1 < orderedStates.length) {
-                return index + 1;
-            }
-            else {
-                return 0;
-            }
-        });
-    }
-}
+import { useState, useCallback } from 'react';
+export function useStateCycle(orderedStates, initialStateIndex = 0) {
+    const [index, setIndex] = useState(initialStateIndex);
+    return [orderedStates[index], useCallback(next, [orderedStates])];
+    function next() {
+        setIndex(index => {
+            if (index + 1 < orderedStates.length) {
+                return index + 1;
+            }
+            else {
+                return 0;
+            }
+        });
+    }
+}
 //# sourceMappingURL=use-state-cycle.js.map

package/lib/use-step.d.ts

@@ -1,2 +1,2 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];
+import { NonEmptyArray } from '@blackglory/prelude';
+export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];

package/lib/use-step.js

@@ -1,26 +1,26 @@
-import { useState, useCallback } from 'react';
-export function useStep(steps, initialStepIndex = 0) {
-    const [index, setIndex] = useState(initialStepIndex);
-    return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
-    function next() {
-        setIndex(index => {
-            if (index === steps.length - 1) {
-                return index;
-            }
-            else {
-                return index + 1;
-            }
-        });
-    }
-    function previous() {
-        setIndex(index => {
-            if (index === 0) {
-                return index;
-            }
-            else {
-                return index - 1;
-            }
-        });
-    }
-}
+import { useState, useCallback } from 'react';
+export function useStep(steps, initialStepIndex = 0) {
+    const [index, setIndex] = useState(initialStepIndex);
+    return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
+    function next() {
+        setIndex(index => {
+            if (index === steps.length - 1) {
+                return index;
+            }
+            else {
+                return index + 1;
+            }
+        });
+    }
+    function previous() {
+        setIndex(index => {
+            if (index === 0) {
+                return index;
+            }
+            else {
+                return index - 1;
+            }
+        });
+    }
+}
 //# sourceMappingURL=use-step.js.map

package/lib/use-toggle.d.ts

@@ -1 +1 @@
-export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];
+export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];

package/lib/use-toggle.js

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react';
-export function useToggle(initialState = false) {
-    const [state, setState] = useState(initialState);
-    return [state, useCallback(toggle, [])];
-    function toggle() {
-        setState(state => !state);
-    }
-}
+import { useState, useCallback } from 'react';
+export function useToggle(initialState = false) {
+    const [state, setState] = useState(initialState);
+    return [state, useCallback(toggle, [])];
+    function toggle() {
+        setState(state => !state);
+    }
+}
 //# sourceMappingURL=use-toggle.js.map

package/lib/use-unmount.d.ts

@@ -1 +1 @@
-export declare function useUnmount(effect: () => void): void;
+export declare function useUnmount(effect: () => void): void;

package/lib/use-unmount.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-export function useUnmount(effect) {
-    useEffect(() => effect, []);
-}
+import { useEffect } from 'react';
+export function useUnmount(effect) {
+    useEffect(() => effect, []);
+}
 //# sourceMappingURL=use-unmount.js.map

package/lib/use-update-effect.d.ts

@@ -1,2 +1,2 @@
-import { EffectCallback } from 'react';
-export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;
+import { EffectCallback } from 'react';
+export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;

package/lib/use-update-effect.js

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
-import { useIsFirstRender } from './use-is-first-render.js';
-export function useUpdateEffect(effect, deps) {
-    const isFirstRender = useIsFirstRender();
-    useEffect(() => {
-        if (!isFirstRender()) {
-            return effect();
-        }
-    }, deps);
-}
+import { useEffect } from 'react';
+import { useIsFirstRender } from './use-is-first-render.js';
+export function useUpdateEffect(effect, deps) {
+    const isFirstRender = useIsFirstRender();
+    useEffect(() => {
+        if (!isFirstRender()) {
+            return effect();
+        }
+    }, deps);
+}
 //# sourceMappingURL=use-update-effect.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "",
   "keywords": [],
   "files": [

package/src/index.ts

@@ -13,7 +13,10 @@ export * from './use-multiple-selection.js'
 export * from './use-state-cycle.js'
 export * from './use-toggle.js'
 export * from './use-resize-observer.js'
+export * from './use-intersection-observer.js'
 export * from './use-step.js'
 export * from './use-force-update.js'
 export * from './use-finite-state-machine.js'
 export * from './use-iife.js'
+export * from './use-memo-with-cleanup.js'
+export * from './use-get-set.js'

package/src/use-callback-async.ts

@@ -1,25 +1,27 @@
-import { useLayoutEffect, useCallback, useMemo, DependencyList } from 'react'
+import { useCallback, DependencyList } from 'react'
 import { go } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
+import { useMemoWithCleanup } from './use-memo-with-cleanup.js'
 
-const abort = Symbol()
+const symbolAbort = Symbol()
 
 export function useCallbackAsync<Args extends unknown[]>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>
 , deps: DependencyList
 ): (...args: Args) => void {
-  const controller = useMemo(() => new AbortController(), deps)
-  useLayoutEffect(() => {
-    return () => controller.abort(abort)
-  }, [controller])
+  const controller = useMemoWithCleanup(
+    () => new AbortController()
+  , controller => controller.abort(symbolAbort)
+  , deps
+  )
 
   return useCallback((...args: Args) => {
     go(async () => {
       try {
         await callback(...args, controller.signal)
       } catch (err) {
-        if (err !== abort) throw err
+        if (err !== symbolAbort) throw err
       }
     })
-  }, [controller])
+  }, deps)
 }

package/src/use-get-set.ts

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from 'react'
+import { useForceUpdate } from './use-force-update.js'
+
+export function useGetSet<T>(
+  initialValue: T
+): [get: () => T, set: (value: T) => void] {
+  const forceUpdate = useForceUpdate()
+  const ref = useRef<T>(initialValue)
+
+  return [
+    useCallback(() => ref.current, [])
+  , useCallback((value: T) => {
+      if (ref.current !== value) {
+        ref.current = value
+        forceUpdate()
+      }
+    }, [])
+  ]
+}

package/src/use-intersection-observer.ts

@@ -0,0 +1,44 @@
+import { useEffect, RefObject, MutableRefObject } from 'react'
+import { isntNull } from '@blackglory/prelude'
+
+export function useIntersectionObserver(
+  callback: IntersectionObserverCallback
+, options: IntersectionObserverInit | undefined
+, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+): void
+export function useIntersectionObserver(
+  callback: IntersectionObserverCallback
+, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+): void
+export function useIntersectionObserver(...args:
+| [
+    callback: IntersectionObserverCallback
+  , options: IntersectionObserverInit | undefined
+  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  ]
+| [
+    callback: IntersectionObserverCallback
+  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  ]
+): void {
+  if (args.length === 2) {
+    const [callback, refs] = args
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useIntersectionObserver(callback, undefined, refs)
+  }
+
+  const [callback, options, refs] = args
+  const deps = refs.map(x => x.current)
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const observer = new IntersectionObserver(callback, options)
+
+    refs
+      .map(x => x.current)
+      .filter(isntNull)
+      .forEach(x => observer.observe(x))
+
+    return () => observer.disconnect()
+  }, deps)
+}

package/src/use-memo-with-cleanup.ts

@@ -0,0 +1,15 @@
+import { useMemo, useEffect } from 'react'
+
+export function useMemoWithCleanup<T>(
+  factory: () => T
+, cleanup: (value: T) => void
+, deps?: React.DependencyList
+): T {
+  const value = useMemo(factory, deps)
+
+  useEffect(() => {
+    return () => cleanup(value)
+  }, deps)
+
+  return value
+}