@altano/use-element-observer 2.0.0 → 2.0.2
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.d.ts +32 -2
- package/package.json +36 -31
- package/dist/Observer.d.ts +0 -7
- package/dist/useElementObserver.d.ts +0 -31
- package/dist/useMountRef.d.ts +0 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface Context {
|
|
4
|
+
mountedElements: Set<Element>;
|
|
5
|
+
}
|
|
6
|
+
declare const ElementObserverContext: React.Context<Context | null>;
|
|
7
|
+
interface Options {
|
|
8
|
+
selector: string;
|
|
9
|
+
tree: React.ReactNode;
|
|
10
|
+
useWrapperDiv?: boolean | undefined;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Allows observing mount/unmount of elements that match a given selector in the
|
|
14
|
+
* given React tree. Tree must be static: only the mounting of the tree itself
|
|
15
|
+
* is monitored. If the tree's DOM is dynamically changed those mounts and
|
|
16
|
+
* unmounts will not be detected.
|
|
17
|
+
*
|
|
18
|
+
* @param tree The React tree to observe.
|
|
19
|
+
* @param onMount The callback that will be passed any elements in the tree that
|
|
20
|
+
* match the given selector, as they mount.
|
|
21
|
+
* @param onUnmount The callback that will be passed any elements in the tree
|
|
22
|
+
* that match the given selector, as they unmount.
|
|
23
|
+
* @param selector The css selector used to select which elements are observed.
|
|
24
|
+
* @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
|
|
25
|
+
* `false`, `children` must be a single child element that can take a ref (which
|
|
26
|
+
* will be overwritten).
|
|
27
|
+
* @returns A tuple of: (1) set of elements and (2) the observed tree to be
|
|
28
|
+
* rendered.
|
|
29
|
+
*/
|
|
30
|
+
declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
|
|
31
|
+
|
|
32
|
+
export { ElementObserverContext, type Options, useElementObserver };
|
package/package.json
CHANGED
|
@@ -1,65 +1,70 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altano/use-element-observer",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Intersection-Observer-based Scroll Spy React Hook",
|
|
5
|
-
"
|
|
5
|
+
"homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/altano/npm-packages",
|
|
9
|
+
"directory": "packages/use-element-observer"
|
|
10
|
+
},
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"author": {
|
|
13
|
+
"name": "Alan Norbauer",
|
|
14
|
+
"email": "altano@gmail.com",
|
|
15
|
+
"url": "https://alan.norbauer.com"
|
|
16
|
+
},
|
|
6
17
|
"sideEffects": false,
|
|
18
|
+
"type": "module",
|
|
7
19
|
"exports": "./dist/index.js",
|
|
8
20
|
"types": "./dist/index.d.ts",
|
|
9
21
|
"files": [
|
|
10
22
|
"dist/**/*.js",
|
|
11
23
|
"dist/**/*.d.ts"
|
|
12
24
|
],
|
|
13
|
-
"author": {
|
|
14
|
-
"name": "Alan Norbauer",
|
|
15
|
-
"email": "altano@gmail.com",
|
|
16
|
-
"url": "https://alan.norbauer.com"
|
|
17
|
-
},
|
|
18
|
-
"license": "ISC",
|
|
19
|
-
"repository": {
|
|
20
|
-
"type": "git",
|
|
21
|
-
"url": "https://github.com/altano/npm-packages",
|
|
22
|
-
"directory": "packages/use-element-observer"
|
|
23
|
-
},
|
|
24
|
-
"homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@uidotdev/usehooks": "^2.4.1"
|
|
27
27
|
},
|
|
28
|
-
"peerDependencies": {
|
|
29
|
-
"react": "^18"
|
|
30
|
-
},
|
|
31
28
|
"devDependencies": {
|
|
29
|
+
"@arethetypeswrong/cli": "^0.15.4",
|
|
32
30
|
"@testing-library/jest-dom": "^6.4.2",
|
|
33
31
|
"@testing-library/react": "^14.2.2",
|
|
34
32
|
"@types/react": "^18.2.64",
|
|
35
33
|
"@types/react-dom": "^18.2.21",
|
|
36
|
-
"@
|
|
37
|
-
"
|
|
38
|
-
"eslint": "^
|
|
39
|
-
"jsdom": "^
|
|
40
|
-
"prettier": "^3.
|
|
41
|
-
"react": "^18.
|
|
42
|
-
"typescript": "^5.
|
|
43
|
-
"
|
|
34
|
+
"@vitest/coverage-v8": "^3.0.9",
|
|
35
|
+
"depcheck": "^1.4.7",
|
|
36
|
+
"eslint": "^9.22.0",
|
|
37
|
+
"jsdom": "^25.0.1",
|
|
38
|
+
"prettier": "^3.3.3",
|
|
39
|
+
"react": "^18.3.1",
|
|
40
|
+
"typescript": "^5.8.2",
|
|
41
|
+
"vite": "^6.2.3",
|
|
42
|
+
"vitest": "^3.0.9",
|
|
43
|
+
"@altano/build-config": "0.0.0",
|
|
44
|
+
"@altano/testing": "0.0.0",
|
|
44
45
|
"@altano/tsconfig": "0.0.0",
|
|
45
|
-
"
|
|
46
|
+
"@altano/vitest-plugins": "1.0.0"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": "18.x.x"
|
|
46
50
|
},
|
|
47
51
|
"publishConfig": {
|
|
48
52
|
"access": "public"
|
|
49
53
|
},
|
|
50
54
|
"scripts": {
|
|
51
55
|
"build": "tsup --config build-config/tsup.config.browser.ts",
|
|
52
|
-
"
|
|
56
|
+
"check:exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
|
|
57
|
+
"check:types:src": "tsc --noEmit",
|
|
58
|
+
"check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
|
|
59
|
+
"check:unused-dependencies": "depcheck",
|
|
53
60
|
"clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
|
|
54
61
|
"dev": "pnpm run build --watch",
|
|
55
62
|
"format": "prettier --check src",
|
|
56
63
|
"format:fix": "prettier --write src",
|
|
57
|
-
"lint": "eslint
|
|
64
|
+
"lint": "eslint",
|
|
58
65
|
"lint:fix": "TIMING=1 pnpm lint --fix",
|
|
59
66
|
"lint:timing": "TIMING=1 pnpm lint",
|
|
60
67
|
"test:unit": "vitest --run",
|
|
61
|
-
"test:unit:watch": "vitest"
|
|
62
|
-
"typecheck:src": "tsc --noEmit",
|
|
63
|
-
"typecheck:test": "tsc --noEmit --project ./tests/tsconfig.json"
|
|
68
|
+
"test:unit:watch": "vitest"
|
|
64
69
|
}
|
|
65
70
|
}
|
package/dist/Observer.d.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface Context {
|
|
3
|
-
mountedElements: Set<Element>;
|
|
4
|
-
}
|
|
5
|
-
export declare const ElementObserverContext: React.Context<Context | null>;
|
|
6
|
-
export interface Options {
|
|
7
|
-
selector: string;
|
|
8
|
-
tree: React.ReactNode;
|
|
9
|
-
useWrapperDiv?: boolean;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Allows observing mount/unmount of elements that match a given selector in the
|
|
13
|
-
* given React tree. Tree must be static: only the mounting of the tree itself
|
|
14
|
-
* is monitored. If the tree's DOM is dynamically changed those mounts and
|
|
15
|
-
* unmounts will not be detected.
|
|
16
|
-
*
|
|
17
|
-
* @param tree The React tree to observe.
|
|
18
|
-
* @param onMount The callback that will be passed any elements in the tree that
|
|
19
|
-
* match the given selector, as they mount.
|
|
20
|
-
* @param onUnmount The callback that will be passed any elements in the tree
|
|
21
|
-
* that match the given selector, as they unmount.
|
|
22
|
-
* @param selector The css selector used to select which elements are observed.
|
|
23
|
-
* @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
|
|
24
|
-
* `false`, `children` must be a single child element that can take a ref (which
|
|
25
|
-
* will be overwritten).
|
|
26
|
-
* @returns A tuple of: (1) set of elements and (2) the observed tree to be
|
|
27
|
-
* rendered.
|
|
28
|
-
*/
|
|
29
|
-
export declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
|
|
30
|
-
export {};
|
|
31
|
-
//# sourceMappingURL=useElementObserver.d.ts.map
|
package/dist/useMountRef.d.ts
DELETED