extra-react-hooks 0.6.4 → 0.6.5

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.
Files changed (10) hide show
  1. package/README.md +3 -0
  2. package/lib/use-intersection-observer.d.ts +2 -2
  3. package/lib/use-intersection-observer.js +20 -6
  4. package/lib/use-intersection-observer.js.map +1 -1
  5. package/lib/use-resize-observer.d.ts +1 -1
  6. package/lib/use-resize-observer.js +1 -2
  7. package/lib/use-resize-observer.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/use-intersection-observer.ts +29 -7
  10. package/src/use-resize-observer.ts +1 -2
package/README.md CHANGED
@@ -113,6 +113,7 @@ function useIncrement(
113
113
  function useResizeObserver(
114
114
  callback: ResizeObserverCallback
115
115
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
116
+ , deps?: React.DependencyList
116
117
  ): void
117
118
  ```
118
119
 
@@ -122,10 +123,12 @@ function useIntersectionObserver(
122
123
  callback: IntersectionObserverCallback
123
124
  , options: IntersectionObserverInit | undefined
124
125
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
126
+ , deps?: React.DependencyList
125
127
  ): void
126
128
  function useIntersectionObserver(
127
129
  callback: IntersectionObserverCallback
128
130
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
131
+ , deps?: React.DependencyList
129
132
  ): void
130
133
  ```
131
134
 
package/lib/use-intersection-observer.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { RefObject, MutableRefObject } from 'react';
2
- export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options: IntersectionObserverInit | undefined, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
3
- export declare function useIntersectionObserver(callback: IntersectionObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
2
+ export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options: IntersectionObserverInit | undefined, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;
3
+ export declare function useIntersectionObserver(callback: IntersectionObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;
package/lib/use-intersection-observer.js CHANGED
@@ -1,12 +1,26 @@
1
1
  import { useEffect } from 'react';
2
- import { isntNull } from '@blackglory/prelude';
2
+ import { isArray, isntNull } from '@blackglory/prelude';
3
3
  export function useIntersectionObserver(...args) {
4
- if (args.length === 2) {
5
- const [callback, refs] = args;
6
- return useIntersectionObserver(callback, undefined, refs);
4
+ switch (args.length) {
5
+ case 2: {
6
+ const [callback, refs] = args;
7
+ return useIntersectionObserver(callback, undefined, refs);
8
+ }
9
+ case 3: {
10
+ const [callback, optionsOrRefs, refsOrDeps] = args;
11
+ if (isArray(optionsOrRefs)) {
12
+ const refs = optionsOrRefs;
13
+ const deps = refsOrDeps;
14
+ return useIntersectionObserver(callback, undefined, refs, deps);
15
+ }
16
+ else {
17
+ const options = optionsOrRefs;
18
+ const refs = refsOrDeps;
19
+ return useIntersectionObserver(callback, options, refs);
20
+ }
21
+ }
7
22
  }
8
- const [callback, options, refs] = args;
9
- const deps = refs.map(x => x.current);
23
+ const [callback, options, refs, deps] = args;
10
24
  useEffect(() => {
11
25
  const observer = new IntersectionObserver(callback, options);
12
26
  refs
package/lib/use-intersection-observer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAW9C,MAAM,UAAU,uBAAuB,CAAC,GAAG,IASxC;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QACrB,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;QAE7B,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;KAC1D;IAED,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAGrC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAE5D,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"}
1
+ {"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAU,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAa/D,MAAM,UAAU,uBAAuB,CAAC,GAAG,IAWxC;IAED,QAAQ,IAAI,CAAC,MAAM,EAAE;QACnB,KAAK,CAAC,CAAC,CAAC;YACN,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;YAG7B,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;SAC1D;QACD,KAAK,CAAC,CAAC,CAAC;YACN,MAAM,CAAC,QAAQ,EAAE,aAAa,EAAE,UAAU,CAAC,GAAG,IAAI,CAAA;YAClD,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;gBAC1B,MAAM,IAAI,GAAG,aAAa,CAAA;gBAC1B,MAAM,IAAI,GAAG,UAA8C,CAAA;gBAG3D,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;aAChE;iBAAM;gBACL,MAAM,OAAO,GAAG,aAAa,CAAA;gBAC7B,MAAM,IAAI,GAAG,UAA2E,CAAA;gBAGxF,OAAO,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;aACxD;SACF;KACF;IAED,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IAG5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAE5D,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-resize-observer.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { RefObject, MutableRefObject } from 'react';
2
- export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
2
+ export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;
package/lib/use-resize-observer.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { useEffect } from 'react';
2
2
  import { isntNull } from '@blackglory/prelude';
3
- export function useResizeObserver(callback, refs) {
4
- const deps = refs.map(x => x.current);
3
+ export function useResizeObserver(callback, refs, deps) {
5
4
  useEffect(() => {
6
5
  const observer = new ResizeObserver(callback);
7
6
  refs
package/lib/use-resize-observer.js.map CHANGED
@@ -1 +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"}
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,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "extra-react-hooks",
3
- "version": "0.6.4",
3
+ "version": "0.6.5",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "files": [
package/src/use-intersection-observer.ts CHANGED
@@ -1,34 +1,56 @@
1
1
  import { useEffect, RefObject, MutableRefObject } from 'react'
2
- import { isntNull } from '@blackglory/prelude'
2
+ import { assert, isArray, isntNull } from '@blackglory/prelude'
3
3
 
4
4
  export function useIntersectionObserver(
5
5
  callback: IntersectionObserverCallback
6
6
  , options: IntersectionObserverInit | undefined
7
7
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
8
+ , deps?: React.DependencyList
8
9
  ): void
9
10
  export function useIntersectionObserver(
10
11
  callback: IntersectionObserverCallback
11
12
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
13
+ , deps?: React.DependencyList
12
14
  ): void
13
15
  export function useIntersectionObserver(...args:
14
16
  | [
15
17
  callback: IntersectionObserverCallback
16
18
  , options: IntersectionObserverInit | undefined
17
19
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
20
+ , deps?: React.DependencyList
18
21
  ]
19
22
  | [
20
23
  callback: IntersectionObserverCallback
21
24
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
25
+ , deps?: React.DependencyList
22
26
  ]
23
27
  ): void {
24
- if (args.length === 2) {
25
- const [callback, refs] = args
26
- // eslint-disable-next-line react-hooks/rules-of-hooks
27
- return useIntersectionObserver(callback, undefined, refs)
28
+ switch (args.length) {
29
+ case 2: {
30
+ const [callback, refs] = args
31
+
32
+ // eslint-disable-next-line react-hooks/rules-of-hooks
33
+ return useIntersectionObserver(callback, undefined, refs)
34
+ }
35
+ case 3: {
36
+ const [callback, optionsOrRefs, refsOrDeps] = args
37
+ if (isArray(optionsOrRefs)) {
38
+ const refs = optionsOrRefs
39
+ const deps = refsOrDeps as React.DependencyList | undefined
40
+
41
+ // eslint-disable-next-line react-hooks/rules-of-hooks
42
+ return useIntersectionObserver(callback, undefined, refs, deps)
43
+ } else {
44
+ const options = optionsOrRefs
45
+ const refs = refsOrDeps as Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
46
+
47
+ // eslint-disable-next-line react-hooks/rules-of-hooks
48
+ return useIntersectionObserver(callback, options, refs)
49
+ }
50
+ }
28
51
  }
29
52
 
30
- const [callback, options, refs] = args
31
- const deps = refs.map(x => x.current)
53
+ const [callback, options, refs, deps] = args
32
54
 
33
55
  // eslint-disable-next-line react-hooks/rules-of-hooks
34
56
  useEffect(() => {
package/src/use-resize-observer.ts CHANGED
@@ -4,9 +4,8 @@ import { isntNull } from '@blackglory/prelude'
4
4
  export function useResizeObserver(
5
5
  callback: ResizeObserverCallback
6
6
  , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
7
+ , deps?: React.DependencyList
7
8
  ): void {
8
- const deps = refs.map(x => x.current)
9
-
10
9
  useEffect(() => {
11
10
  const observer = new ResizeObserver(callback)
12
11