@altano/use-element-observer 1.0.6 → 1.0.7

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/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // src/useElementObserver.tsx
2
2
  import React, { useCallback, useContext, useEffect, useRef } from "react";
3
- import { useSet } from "react-use";
3
+ import { useSet } from "@uidotdev/usehooks";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  var ElementObserverContext = React.createContext(null);
6
6
  function useMountRef({ onMount, onUnmount }) {
@@ -42,15 +42,19 @@ function Observer({
42
42
  if (context == null) {
43
43
  throw new Error("Observer context was null");
44
44
  }
45
- const { methods } = context;
46
- const { add, reset } = methods;
45
+ const { mountedElements } = context;
47
46
  const onMount = useCallback(
48
47
  (ref) => {
49
- Array.from(ref.querySelectorAll(selector)).forEach(add);
48
+ Array.from(ref.querySelectorAll(selector)).forEach(
49
+ (e) => mountedElements.add(e)
50
+ );
50
51
  },
51
- [selector, add]
52
+ [selector, mountedElements]
53
+ );
54
+ const onUnmount = useCallback(
55
+ () => mountedElements.clear(),
56
+ [mountedElements]
52
57
  );
53
- const onUnmount = useCallback(() => reset, [reset]);
54
58
  const Component = useWrapperDiv ? ObserveChildWithWrapperDiv : ObserveChild;
55
59
  return /* @__PURE__ */ jsx(Component, { onMount, onUnmount, children });
56
60
  }
@@ -59,8 +63,8 @@ function useElementObserver({
59
63
  selector,
60
64
  useWrapperDiv = true
61
65
  }) {
62
- const [mountedElements, methods] = useSet();
63
- const observedTree = /* @__PURE__ */ jsx(ElementObserverContext.Provider, { value: { mountedElements, methods }, children: /* @__PURE__ */ jsx(Observer, { selector, useWrapperDiv, children: tree }) });
66
+ const mountedElements = useSet();
67
+ const observedTree = /* @__PURE__ */ jsx(ElementObserverContext.Provider, { value: { mountedElements }, children: /* @__PURE__ */ jsx(Observer, { selector, useWrapperDiv, children: tree }) });
64
68
  return [mountedElements, observedTree];
65
69
  }
66
70
  export {
@@ -19,7 +19,7 @@ interface Options {
19
19
  * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
20
20
  * `false`, `children` must be a single child element that can take a ref (which
21
21
  * will be overwritten).
22
- * @returns A tuple of: (1) array of elements and (2) the observed tree to be
22
+ * @returns A tuple of: (1) set of elements and (2) the observed tree to be
23
23
  * rendered.
24
24
  */
25
25
  export declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altano/use-element-observer",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Intersection-Observer-based Scroll Spy React Hook",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -23,21 +23,21 @@
23
23
  },
24
24
  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
25
25
  "dependencies": {
26
- "react-use": "^17.4.0"
26
+ "@uidotdev/usehooks": "^2.4.1"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": "^18"
30
30
  },
31
31
  "devDependencies": {
32
- "@types/react": "^18.0.38",
33
- "@types/react-dom": "^18.0.11",
34
- "eslint": "^8.39.0",
35
- "prettier": "^2.8.7",
36
- "react": "^18",
37
- "tsup": "^7.2.0",
38
- "typescript": "^5.1.6",
32
+ "@types/react": "^18.2.64",
33
+ "@types/react-dom": "^18.2.21",
34
+ "eslint": "^8.57.0",
35
+ "prettier": "^3.2.5",
36
+ "react": "^18.2.0",
37
+ "tsup": "^8.0.2",
38
+ "typescript": "^5.4.2",
39
39
  "@altano/tsconfig": "0.0.0",
40
- "eslint-config-altano": "0.0.0"
40
+ "eslint-config-altano": "0.0.1"
41
41
  },
42
42
  "publishConfig": {
43
43
  "access": "public"
@@ -49,7 +49,8 @@
49
49
  "lint": "eslint src/**/*.ts*",
50
50
  "lint:timing": "TIMING=1 eslint src/**/*.ts*",
51
51
  "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
52
- "format": "prettier --write src",
52
+ "format": "prettier --check src",
53
+ "format:fix": "prettier --write src",
53
54
  "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist"
54
55
  }
55
56
  }