@vitus-labs/hooks 0.66.0 → 0.68.0
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/LICENSE +1 -1
- package/lib/analysis/vitus-labs-hooks.browser.js.html +1 -1
- package/lib/analysis/vitus-labs-hooks.js.html +1 -1
- package/lib/analysis/vitus-labs-hooks.module.js.html +1 -1
- package/lib/analysis/vitus-labs-hooks.native.js.html +1 -1
- package/lib/index.d.ts +17 -13
- package/lib/types/index.d.ts +1 -0
- package/lib/types/index.d.ts.map +1 -0
- package/lib/types/useHover.d.ts +2 -1
- package/lib/types/useHover.d.ts.map +1 -0
- package/lib/types/useWindowResize.d.ts +6 -4
- package/lib/types/useWindowResize.d.ts.map +1 -0
- package/lib/vitus-labs-hooks.browser.js +9 -2
- package/lib/vitus-labs-hooks.browser.js.map +1 -1
- package/lib/vitus-labs-hooks.js +9 -4
- package/lib/vitus-labs-hooks.js.map +1 -1
- package/lib/vitus-labs-hooks.module.js +9 -2
- package/lib/vitus-labs-hooks.module.js.map +1 -1
- package/lib/vitus-labs-hooks.native.js +9 -2
- package/lib/vitus-labs-hooks.native.js.map +1 -1
- package/package.json +8 -8
package/LICENSE
CHANGED
|
@@ -6618,7 +6618,7 @@ var drawChart = (function (exports) {
|
|
|
6618
6618
|
</script>
|
|
6619
6619
|
<script>
|
|
6620
6620
|
/*<!--*/
|
|
6621
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.browser.js","children":[{"name":"src","children":[{"uid":"
|
|
6621
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.browser.js","children":[{"name":"src","children":[{"uid":"7aed-25","name":"useHover.ts"},{"uid":"7aed-27","name":"useWindowResize.ts"},{"uid":"7aed-29","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7aed-25":{"renderedLength":333,"gzipLength":179,"brotliLength":0,"metaUid":"7aed-24"},"7aed-27":{"renderedLength":875,"gzipLength":329,"brotliLength":0,"metaUid":"7aed-26"},"7aed-29":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"7aed-28"}},"nodeMetas":{"7aed-24":{"id":"/src/useHover.ts","moduleParts":{"vitus-labs-hooks.browser.js":"7aed-25"},"imported":[{"uid":"7aed-30"}],"importedBy":[{"uid":"7aed-28"}]},"7aed-26":{"id":"/src/useWindowResize.ts","moduleParts":{"vitus-labs-hooks.browser.js":"7aed-27"},"imported":[{"uid":"7aed-30"},{"uid":"7aed-31"}],"importedBy":[{"uid":"7aed-28"}]},"7aed-28":{"id":"/src/index.ts","moduleParts":{"vitus-labs-hooks.browser.js":"7aed-29"},"imported":[{"uid":"7aed-24"},{"uid":"7aed-26"}],"importedBy":[],"isEntry":true},"7aed-30":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-24"},{"uid":"7aed-26"}],"isExternal":true},"7aed-31":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-26"}],"isExternal":true}},"env":{"rollup":"3.9.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
6622
6622
|
|
|
6623
6623
|
const run = () => {
|
|
6624
6624
|
const width = window.innerWidth;
|
|
@@ -6618,7 +6618,7 @@ var drawChart = (function (exports) {
|
|
|
6618
6618
|
</script>
|
|
6619
6619
|
<script>
|
|
6620
6620
|
/*<!--*/
|
|
6621
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.js","children":[{"name":"src","children":[{"uid":"
|
|
6621
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.js","children":[{"name":"src","children":[{"uid":"7aed-1","name":"useHover.ts"},{"uid":"7aed-3","name":"useWindowResize.ts"},{"uid":"7aed-5","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7aed-1":{"renderedLength":351,"gzipLength":184,"brotliLength":0,"metaUid":"7aed-0"},"7aed-3":{"renderedLength":892,"gzipLength":337,"brotliLength":0,"metaUid":"7aed-2"},"7aed-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"7aed-4"}},"nodeMetas":{"7aed-0":{"id":"/src/useHover.ts","moduleParts":{"vitus-labs-hooks.js":"7aed-1"},"imported":[{"uid":"7aed-6"}],"importedBy":[{"uid":"7aed-4"}]},"7aed-2":{"id":"/src/useWindowResize.ts","moduleParts":{"vitus-labs-hooks.js":"7aed-3"},"imported":[{"uid":"7aed-6"},{"uid":"7aed-7"}],"importedBy":[{"uid":"7aed-4"}]},"7aed-4":{"id":"/src/index.ts","moduleParts":{"vitus-labs-hooks.js":"7aed-5"},"imported":[{"uid":"7aed-0"},{"uid":"7aed-2"}],"importedBy":[],"isEntry":true},"7aed-6":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-0"},{"uid":"7aed-2"}],"isExternal":true},"7aed-7":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-2"}],"isExternal":true}},"env":{"rollup":"3.9.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
6622
6622
|
|
|
6623
6623
|
const run = () => {
|
|
6624
6624
|
const width = window.innerWidth;
|
|
@@ -6618,7 +6618,7 @@ var drawChart = (function (exports) {
|
|
|
6618
6618
|
</script>
|
|
6619
6619
|
<script>
|
|
6620
6620
|
/*<!--*/
|
|
6621
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.module.js","children":[{"name":"src","children":[{"uid":"
|
|
6621
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.module.js","children":[{"name":"src","children":[{"uid":"7aed-9","name":"useHover.ts"},{"uid":"7aed-11","name":"useWindowResize.ts"},{"uid":"7aed-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7aed-9":{"renderedLength":333,"gzipLength":179,"brotliLength":0,"metaUid":"7aed-8"},"7aed-11":{"renderedLength":875,"gzipLength":329,"brotliLength":0,"metaUid":"7aed-10"},"7aed-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"7aed-12"}},"nodeMetas":{"7aed-8":{"id":"/src/useHover.ts","moduleParts":{"vitus-labs-hooks.module.js":"7aed-9"},"imported":[{"uid":"7aed-14"}],"importedBy":[{"uid":"7aed-12"}]},"7aed-10":{"id":"/src/useWindowResize.ts","moduleParts":{"vitus-labs-hooks.module.js":"7aed-11"},"imported":[{"uid":"7aed-14"},{"uid":"7aed-15"}],"importedBy":[{"uid":"7aed-12"}]},"7aed-12":{"id":"/src/index.ts","moduleParts":{"vitus-labs-hooks.module.js":"7aed-13"},"imported":[{"uid":"7aed-8"},{"uid":"7aed-10"}],"importedBy":[],"isEntry":true},"7aed-14":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-8"},{"uid":"7aed-10"}],"isExternal":true},"7aed-15":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-10"}],"isExternal":true}},"env":{"rollup":"3.9.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
6622
6622
|
|
|
6623
6623
|
const run = () => {
|
|
6624
6624
|
const width = window.innerWidth;
|
|
@@ -6618,7 +6618,7 @@ var drawChart = (function (exports) {
|
|
|
6618
6618
|
</script>
|
|
6619
6619
|
<script>
|
|
6620
6620
|
/*<!--*/
|
|
6621
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.native.js","children":[{"name":"src","children":[{"uid":"
|
|
6621
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-hooks.native.js","children":[{"name":"src","children":[{"uid":"7aed-17","name":"useHover.ts"},{"uid":"7aed-19","name":"useWindowResize.ts"},{"uid":"7aed-21","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7aed-17":{"renderedLength":333,"gzipLength":179,"brotliLength":0,"metaUid":"7aed-16"},"7aed-19":{"renderedLength":875,"gzipLength":329,"brotliLength":0,"metaUid":"7aed-18"},"7aed-21":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"7aed-20"}},"nodeMetas":{"7aed-16":{"id":"/src/useHover.ts","moduleParts":{"vitus-labs-hooks.native.js":"7aed-17"},"imported":[{"uid":"7aed-22"}],"importedBy":[{"uid":"7aed-20"}]},"7aed-18":{"id":"/src/useWindowResize.ts","moduleParts":{"vitus-labs-hooks.native.js":"7aed-19"},"imported":[{"uid":"7aed-22"},{"uid":"7aed-23"}],"importedBy":[{"uid":"7aed-20"}]},"7aed-20":{"id":"/src/index.ts","moduleParts":{"vitus-labs-hooks.native.js":"7aed-21"},"imported":[{"uid":"7aed-16"},{"uid":"7aed-18"}],"importedBy":[],"isEntry":true},"7aed-22":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-16"},{"uid":"7aed-18"}],"isExternal":true},"7aed-23":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7aed-18"}],"isExternal":true}},"env":{"rollup":"3.9.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
6622
6622
|
|
|
6623
6623
|
const run = () => {
|
|
6624
6624
|
const width = window.innerWidth;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
declare type
|
|
1
|
+
declare type Sizes = {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
export declare type UseHover = (initialValue?: boolean) => {
|
|
2
7
|
hover: boolean;
|
|
3
8
|
onMouseEnter: () => void;
|
|
4
9
|
onMouseLeave: () => void;
|
|
5
10
|
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export { UseHover, UseWindowResize, useHover, useWindowResize };
|
|
11
|
+
|
|
12
|
+
export declare const useHover: UseHover;
|
|
13
|
+
|
|
14
|
+
export declare type UseWindowResize = (params: Partial<{
|
|
15
|
+
throttleDelay: number;
|
|
16
|
+
onChange: (params: Sizes) => void;
|
|
17
|
+
}>, initialValues?: Partial<Sizes>) => Sizes;
|
|
18
|
+
|
|
19
|
+
export declare const useWindowResize: UseWindowResize;
|
|
20
|
+
|
|
21
|
+
export { }
|
package/lib/types/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,eAAe,EAAE,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEpE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA"}
|
package/lib/types/useHover.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type UseHover = (initialValue?: boolean) => {
|
|
2
2
|
hover: boolean;
|
|
3
3
|
onMouseEnter: () => void;
|
|
4
4
|
onMouseLeave: () => void;
|
|
5
5
|
};
|
|
6
6
|
declare const useHover: UseHover;
|
|
7
7
|
export default useHover;
|
|
8
|
+
//# sourceMappingURL=useHover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHover.d.ts","sourceRoot":"","sources":["../../src/useHover.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK;IACjD,KAAK,EAAE,OAAO,CAAA;IACd,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,QAWf,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
width: number;
|
|
3
|
-
height: number;
|
|
4
|
-
}>) => {
|
|
1
|
+
type Sizes = {
|
|
5
2
|
width: number;
|
|
6
3
|
height: number;
|
|
7
4
|
};
|
|
5
|
+
export type UseWindowResize = (params: Partial<{
|
|
6
|
+
throttleDelay: number;
|
|
7
|
+
onChange: (params: Sizes) => void;
|
|
8
|
+
}>, initialValues?: Partial<Sizes>) => Sizes;
|
|
8
9
|
declare const useWindowResize: UseWindowResize;
|
|
9
10
|
export default useWindowResize;
|
|
11
|
+
//# sourceMappingURL=useWindowResize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWindowResize.d.ts","sourceRoot":"","sources":["../../src/useWindowResize.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,CAC5B,MAAM,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC,CAAC,EACF,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,KAC3B,KAAK,CAAA;AAEV,QAAA,MAAM,eAAe,EAAE,eAiCtB,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -12,16 +12,23 @@ const useHover = (initial = false) => {
|
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
const useWindowResize = (throttleDelay = 200, { width = 0, height = 0 } = {}) => {
|
|
15
|
+
const useWindowResize = ({ throttleDelay = 200, onChange }, { width = 0, height = 0 } = {}) => {
|
|
16
16
|
const [windowSize, setWindowSize] = useState({ width, height });
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
const getSize = () => ({
|
|
19
19
|
width: window.innerWidth,
|
|
20
20
|
height: window.innerHeight,
|
|
21
21
|
});
|
|
22
|
-
|
|
22
|
+
const calculatedSize = getSize();
|
|
23
|
+
setWindowSize(calculatedSize);
|
|
24
|
+
if (onChange) {
|
|
25
|
+
onChange(calculatedSize);
|
|
26
|
+
}
|
|
23
27
|
const handleResize = throttle(() => {
|
|
24
28
|
setWindowSize(getSize());
|
|
29
|
+
if (onChange) {
|
|
30
|
+
onChange(calculatedSize);
|
|
31
|
+
}
|
|
25
32
|
}, throttleDelay);
|
|
26
33
|
window.addEventListener('resize', handleResize, false);
|
|
27
34
|
return () => window.removeEventListener('resize', handleResize, false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vitus-labs-hooks.browser.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\nexport type UseWindowResize = (\n
|
|
1
|
+
{"version":3,"file":"vitus-labs-hooks.browser.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\ntype Sizes = {\n width: number\n height: number\n}\n\nexport type UseWindowResize = (\n params: Partial<{\n throttleDelay: number\n onChange: (params: Sizes) => void\n }>,\n initialValues?: Partial<Sizes>\n) => Sizes\n\nconst useWindowResize: UseWindowResize = (\n { throttleDelay = 200, onChange },\n { width = 0, height = 0 } = {}\n) => {\n const [windowSize, setWindowSize] = useState({ width, height })\n\n useEffect(() => {\n const getSize = () => ({\n width: window.innerWidth,\n height: window.innerHeight,\n })\n\n const calculatedSize = getSize()\n\n setWindowSize(calculatedSize)\n\n if (onChange) {\n onChange(calculatedSize)\n }\n\n const handleResize = throttle(() => {\n setWindowSize(getSize())\n if (onChange) {\n onChange(calculatedSize)\n }\n }, throttleDelay)\n\n window.addEventListener('resize', handleResize, false)\n\n return () => window.removeEventListener('resize', handleResize, false)\n }, [throttleDelay])\n\n return windowSize\n}\n\nexport default useWindowResize\n"],"names":[],"mappings":";;;AAQA,MAAM,QAAQ,GAAa,CAAC,OAAO,GAAG,KAAK,KAAI;IAC7C,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;AAE9C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AACzD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,KAAK;AACL,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,YAAY,EAAE,UAAU;KACzB,CAAA;AACH;;ACHM,MAAA,eAAe,GAAoB,CACvC,EAAE,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,EACjC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,KAC5B;AACF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IAE/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,OAAO;YACrB,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;AAC3B,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,cAAc,GAAG,OAAO,EAAE,CAAA;QAEhC,aAAa,CAAC,cAAc,CAAC,CAAA;AAE7B,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,SAAA;AAED,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAK;AACjC,YAAA,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;AACxB,YAAA,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,aAAA;SACF,EAAE,aAAa,CAAC,CAAA;QAEjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AAEtD,QAAA,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AACxE,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAEnB,IAAA,OAAO,UAAU,CAAA;AACnB;;;;"}
|
package/lib/vitus-labs-hooks.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var react = require('react');
|
|
6
4
|
var core = require('@vitus-labs/core');
|
|
7
5
|
|
|
@@ -16,16 +14,23 @@ const useHover = (initial = false) => {
|
|
|
16
14
|
};
|
|
17
15
|
};
|
|
18
16
|
|
|
19
|
-
const useWindowResize = (throttleDelay = 200, { width = 0, height = 0 } = {}) => {
|
|
17
|
+
const useWindowResize = ({ throttleDelay = 200, onChange }, { width = 0, height = 0 } = {}) => {
|
|
20
18
|
const [windowSize, setWindowSize] = react.useState({ width, height });
|
|
21
19
|
react.useEffect(() => {
|
|
22
20
|
const getSize = () => ({
|
|
23
21
|
width: window.innerWidth,
|
|
24
22
|
height: window.innerHeight,
|
|
25
23
|
});
|
|
26
|
-
|
|
24
|
+
const calculatedSize = getSize();
|
|
25
|
+
setWindowSize(calculatedSize);
|
|
26
|
+
if (onChange) {
|
|
27
|
+
onChange(calculatedSize);
|
|
28
|
+
}
|
|
27
29
|
const handleResize = core.throttle(() => {
|
|
28
30
|
setWindowSize(getSize());
|
|
31
|
+
if (onChange) {
|
|
32
|
+
onChange(calculatedSize);
|
|
33
|
+
}
|
|
29
34
|
}, throttleDelay);
|
|
30
35
|
window.addEventListener('resize', handleResize, false);
|
|
31
36
|
return () => window.removeEventListener('resize', handleResize, false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vitus-labs-hooks.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\nexport type UseWindowResize = (\n
|
|
1
|
+
{"version":3,"file":"vitus-labs-hooks.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\ntype Sizes = {\n width: number\n height: number\n}\n\nexport type UseWindowResize = (\n params: Partial<{\n throttleDelay: number\n onChange: (params: Sizes) => void\n }>,\n initialValues?: Partial<Sizes>\n) => Sizes\n\nconst useWindowResize: UseWindowResize = (\n { throttleDelay = 200, onChange },\n { width = 0, height = 0 } = {}\n) => {\n const [windowSize, setWindowSize] = useState({ width, height })\n\n useEffect(() => {\n const getSize = () => ({\n width: window.innerWidth,\n height: window.innerHeight,\n })\n\n const calculatedSize = getSize()\n\n setWindowSize(calculatedSize)\n\n if (onChange) {\n onChange(calculatedSize)\n }\n\n const handleResize = throttle(() => {\n setWindowSize(getSize())\n if (onChange) {\n onChange(calculatedSize)\n }\n }, throttleDelay)\n\n window.addEventListener('resize', handleResize, false)\n\n return () => window.removeEventListener('resize', handleResize, false)\n }, [throttleDelay])\n\n return windowSize\n}\n\nexport default useWindowResize\n"],"names":["useState","useCallback","useEffect","throttle"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAa,CAAC,OAAO,GAAG,KAAK,KAAI;IAC7C,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,OAAO,CAAC,CAAA;AAE9C,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AACzD,IAAA,MAAM,UAAU,GAAGA,iBAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,KAAK;AACL,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,YAAY,EAAE,UAAU;KACzB,CAAA;AACH;;ACHM,MAAA,eAAe,GAAoB,CACvC,EAAE,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,EACjC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,KAC5B;AACF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGD,cAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IAE/DE,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,OAAO;YACrB,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;AAC3B,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,cAAc,GAAG,OAAO,EAAE,CAAA;QAEhC,aAAa,CAAC,cAAc,CAAC,CAAA;AAE7B,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,SAAA;AAED,QAAA,MAAM,YAAY,GAAGC,aAAQ,CAAC,MAAK;AACjC,YAAA,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;AACxB,YAAA,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,aAAA;SACF,EAAE,aAAa,CAAC,CAAA;QAEjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AAEtD,QAAA,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AACxE,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAEnB,IAAA,OAAO,UAAU,CAAA;AACnB;;;;;"}
|
|
@@ -12,16 +12,23 @@ const useHover = (initial = false) => {
|
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
const useWindowResize = (throttleDelay = 200, { width = 0, height = 0 } = {}) => {
|
|
15
|
+
const useWindowResize = ({ throttleDelay = 200, onChange }, { width = 0, height = 0 } = {}) => {
|
|
16
16
|
const [windowSize, setWindowSize] = useState({ width, height });
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
const getSize = () => ({
|
|
19
19
|
width: window.innerWidth,
|
|
20
20
|
height: window.innerHeight,
|
|
21
21
|
});
|
|
22
|
-
|
|
22
|
+
const calculatedSize = getSize();
|
|
23
|
+
setWindowSize(calculatedSize);
|
|
24
|
+
if (onChange) {
|
|
25
|
+
onChange(calculatedSize);
|
|
26
|
+
}
|
|
23
27
|
const handleResize = throttle(() => {
|
|
24
28
|
setWindowSize(getSize());
|
|
29
|
+
if (onChange) {
|
|
30
|
+
onChange(calculatedSize);
|
|
31
|
+
}
|
|
25
32
|
}, throttleDelay);
|
|
26
33
|
window.addEventListener('resize', handleResize, false);
|
|
27
34
|
return () => window.removeEventListener('resize', handleResize, false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vitus-labs-hooks.module.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\nexport type UseWindowResize = (\n
|
|
1
|
+
{"version":3,"file":"vitus-labs-hooks.module.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\ntype Sizes = {\n width: number\n height: number\n}\n\nexport type UseWindowResize = (\n params: Partial<{\n throttleDelay: number\n onChange: (params: Sizes) => void\n }>,\n initialValues?: Partial<Sizes>\n) => Sizes\n\nconst useWindowResize: UseWindowResize = (\n { throttleDelay = 200, onChange },\n { width = 0, height = 0 } = {}\n) => {\n const [windowSize, setWindowSize] = useState({ width, height })\n\n useEffect(() => {\n const getSize = () => ({\n width: window.innerWidth,\n height: window.innerHeight,\n })\n\n const calculatedSize = getSize()\n\n setWindowSize(calculatedSize)\n\n if (onChange) {\n onChange(calculatedSize)\n }\n\n const handleResize = throttle(() => {\n setWindowSize(getSize())\n if (onChange) {\n onChange(calculatedSize)\n }\n }, throttleDelay)\n\n window.addEventListener('resize', handleResize, false)\n\n return () => window.removeEventListener('resize', handleResize, false)\n }, [throttleDelay])\n\n return windowSize\n}\n\nexport default useWindowResize\n"],"names":[],"mappings":";;;AAQA,MAAM,QAAQ,GAAa,CAAC,OAAO,GAAG,KAAK,KAAI;IAC7C,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;AAE9C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AACzD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,KAAK;AACL,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,YAAY,EAAE,UAAU;KACzB,CAAA;AACH;;ACHM,MAAA,eAAe,GAAoB,CACvC,EAAE,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,EACjC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,KAC5B;AACF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IAE/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,OAAO;YACrB,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;AAC3B,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,cAAc,GAAG,OAAO,EAAE,CAAA;QAEhC,aAAa,CAAC,cAAc,CAAC,CAAA;AAE7B,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,SAAA;AAED,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAK;AACjC,YAAA,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;AACxB,YAAA,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,aAAA;SACF,EAAE,aAAa,CAAC,CAAA;QAEjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AAEtD,QAAA,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AACxE,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAEnB,IAAA,OAAO,UAAU,CAAA;AACnB;;;;"}
|
|
@@ -12,16 +12,23 @@ const useHover = (initial = false) => {
|
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
const useWindowResize = (throttleDelay = 200, { width = 0, height = 0 } = {}) => {
|
|
15
|
+
const useWindowResize = ({ throttleDelay = 200, onChange }, { width = 0, height = 0 } = {}) => {
|
|
16
16
|
const [windowSize, setWindowSize] = useState({ width, height });
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
const getSize = () => ({
|
|
19
19
|
width: window.innerWidth,
|
|
20
20
|
height: window.innerHeight,
|
|
21
21
|
});
|
|
22
|
-
|
|
22
|
+
const calculatedSize = getSize();
|
|
23
|
+
setWindowSize(calculatedSize);
|
|
24
|
+
if (onChange) {
|
|
25
|
+
onChange(calculatedSize);
|
|
26
|
+
}
|
|
23
27
|
const handleResize = throttle(() => {
|
|
24
28
|
setWindowSize(getSize());
|
|
29
|
+
if (onChange) {
|
|
30
|
+
onChange(calculatedSize);
|
|
31
|
+
}
|
|
25
32
|
}, throttleDelay);
|
|
26
33
|
window.addEventListener('resize', handleResize, false);
|
|
27
34
|
return () => window.removeEventListener('resize', handleResize, false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vitus-labs-hooks.native.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\nexport type UseWindowResize = (\n
|
|
1
|
+
{"version":3,"file":"vitus-labs-hooks.native.js","sources":["../src/useHover.ts","../src/useWindowResize.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport type UseHover = (initialValue?: boolean) => {\n hover: boolean\n onMouseEnter: () => void\n onMouseLeave: () => void\n}\n\nconst useHover: UseHover = (initial = false) => {\n const [hover, handleHover] = useState(initial)\n\n const setHover = useCallback(() => handleHover(true), [])\n const unsetHover = useCallback(() => handleHover(false), [])\n\n return {\n hover,\n onMouseEnter: setHover,\n onMouseLeave: unsetHover,\n }\n}\n\nexport default useHover\n","import { useState, useEffect } from 'react'\nimport { throttle } from '@vitus-labs/core'\n\ntype Sizes = {\n width: number\n height: number\n}\n\nexport type UseWindowResize = (\n params: Partial<{\n throttleDelay: number\n onChange: (params: Sizes) => void\n }>,\n initialValues?: Partial<Sizes>\n) => Sizes\n\nconst useWindowResize: UseWindowResize = (\n { throttleDelay = 200, onChange },\n { width = 0, height = 0 } = {}\n) => {\n const [windowSize, setWindowSize] = useState({ width, height })\n\n useEffect(() => {\n const getSize = () => ({\n width: window.innerWidth,\n height: window.innerHeight,\n })\n\n const calculatedSize = getSize()\n\n setWindowSize(calculatedSize)\n\n if (onChange) {\n onChange(calculatedSize)\n }\n\n const handleResize = throttle(() => {\n setWindowSize(getSize())\n if (onChange) {\n onChange(calculatedSize)\n }\n }, throttleDelay)\n\n window.addEventListener('resize', handleResize, false)\n\n return () => window.removeEventListener('resize', handleResize, false)\n }, [throttleDelay])\n\n return windowSize\n}\n\nexport default useWindowResize\n"],"names":[],"mappings":";;;AAQA,MAAM,QAAQ,GAAa,CAAC,OAAO,GAAG,KAAK,KAAI;IAC7C,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;AAE9C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AACzD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,KAAK;AACL,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,YAAY,EAAE,UAAU;KACzB,CAAA;AACH;;ACHM,MAAA,eAAe,GAAoB,CACvC,EAAE,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,EACjC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,KAC5B;AACF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IAE/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,OAAO;YACrB,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;AAC3B,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,cAAc,GAAG,OAAO,EAAE,CAAA;QAEhC,aAAa,CAAC,cAAc,CAAC,CAAA;AAE7B,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,SAAA;AAED,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAK;AACjC,YAAA,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;AACxB,YAAA,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,cAAc,CAAC,CAAA;AACzB,aAAA;SACF,EAAE,aAAa,CAAC,CAAA;QAEjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AAEtD,QAAA,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAA;AACxE,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAEnB,IAAA,OAAO,UAAU,CAAA;AACnB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vitus-labs/hooks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.68.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Vit Bokisch <vit@bokisch.cz>",
|
|
6
6
|
"maintainers": [
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"./lib/vitus-labs-hooks.module.js": "./lib/vitus-labs-hooks.browser.js"
|
|
14
14
|
},
|
|
15
15
|
"react-native": "lib/vitus-labs-hooks.native.js",
|
|
16
|
-
"
|
|
16
|
+
"types": "lib/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
18
|
"lib/"
|
|
19
19
|
],
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"react": ">= 16.8"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vitus-labs/core": "^0.
|
|
51
|
-
"@vitus-labs/tools-babel": "^0.
|
|
52
|
-
"@vitus-labs/tools-rollup": "^0.
|
|
53
|
-
"@vitus-labs/tools-storybook": "^0.
|
|
54
|
-
"@vitus-labs/tools-typescript": "^0.
|
|
50
|
+
"@vitus-labs/core": "^0.68.0",
|
|
51
|
+
"@vitus-labs/tools-babel": "^0.40.0",
|
|
52
|
+
"@vitus-labs/tools-rollup": "^0.40.0",
|
|
53
|
+
"@vitus-labs/tools-storybook": "^0.40.0",
|
|
54
|
+
"@vitus-labs/tools-typescript": "^0.40.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "545817d875cd2ca002758309789ac72e16efa704"
|
|
57
57
|
}
|