extra-react-hooks 0.6.3 → 0.6.5

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>>, deps?: React.DependencyList): void;

package/lib/use-resize-observer.js

@@ -1,14 +1,13 @@
-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, deps) {
+    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-resize-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize-observer.js","sourceRoot":"","sources":["../src/use-resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,UAAU,iBAAiB,CAC/B,QAAgC,EAChC,IAAmE;IAEnE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAA;QAE7C,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-resize-observer.js","sourceRoot":"","sources":["../src/use-resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,UAAU,iBAAiB,CAC/B,QAAgC,EAChC,IAAmE,EACnE,IAA2B;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAA;QAE7C,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

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.3",
+  "version": "0.6.5",
   "description": "",
   "keywords": [],
   "files": [

package/src/index.ts

@@ -13,6 +13,7 @@ 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'

package/src/use-intersection-observer.ts

@@ -0,0 +1,66 @@
+import { useEffect, RefObject, MutableRefObject } from 'react'
+import { assert, isArray, isntNull } from '@blackglory/prelude'
+
+export function useIntersectionObserver(
+  callback: IntersectionObserverCallback
+, options: IntersectionObserverInit | undefined
+, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
+): void
+export function useIntersectionObserver(
+  callback: IntersectionObserverCallback
+, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
+): void
+export function useIntersectionObserver(...args:
+| [
+    callback: IntersectionObserverCallback
+  , options: IntersectionObserverInit | undefined
+  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  , deps?: React.DependencyList
+  ]
+| [
+    callback: IntersectionObserverCallback
+  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  , deps?: React.DependencyList
+  ]
+): void {
+  switch (args.length) {
+    case 2: {
+      const [callback, refs] = args
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useIntersectionObserver(callback, undefined, refs)
+    }
+    case 3: {
+      const [callback, optionsOrRefs, refsOrDeps] = args
+      if (isArray(optionsOrRefs)) {
+        const refs = optionsOrRefs
+        const deps = refsOrDeps as React.DependencyList | undefined
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useIntersectionObserver(callback, undefined, refs, deps)
+      } else {
+        const options = optionsOrRefs
+        const refs = refsOrDeps as Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useIntersectionObserver(callback, options, refs)
+      }
+    }
+  }
+
+  const [callback, options, refs, deps] = args
+
+  // 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-resize-observer.ts

@@ -4,9 +4,8 @@ import { isntNull } from '@blackglory/prelude'
 export function useResizeObserver(
   callback: ResizeObserverCallback
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void {
-  const deps = refs.map(x => x.current)
-
   useEffect(() => {
     const observer = new ResizeObserver(callback)