@wiggindev/hooks 0.1.3 → 0.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. package/.eslintrc.cjs +7 -43
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +6 -5
  5. package/dist/index.modern.js +51 -1
  6. package/dist/index.modern.js.map +1 -1
  7. package/dist/index.module.js +80 -1
  8. package/dist/index.module.js.map +1 -1
  9. package/dist/index.umd.js +87 -1
  10. package/dist/index.umd.js.map +1 -1
  11. package/dist/useDocumentEventListener.d.ts +7 -2
  12. package/dist/useEvent.d.ts +2 -3
  13. package/dist/useEventListener.d.ts +10 -3
  14. package/dist/useIsomorphicLayoutEffect.d.ts +2 -2
  15. package/dist/usePrevious.d.ts +1 -0
  16. package/dist/useWindowDimensions.d.ts +4 -0
  17. package/dist/useWindowEventListener.d.ts +7 -2
  18. package/package.json +6 -21
  19. package/src/index.ts +2 -0
  20. package/src/useDocumentEventListener.ts +1 -1
  21. package/src/useEvent.ts +1 -2
  22. package/src/useEventListener.ts +1 -1
  23. package/src/usePrevious.ts +9 -0
  24. package/src/useWindowDimensions.ts +34 -0
  25. package/tsconfig.json +3 -22
  26. package/.editorconfig +0 -10
  27. package/.husky/pre-commit +0 -4
  28. package/.idea/codeStyles/Project.xml +0 -50
  29. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  30. package/.idea/codestream.xml +0 -7
  31. package/.idea/hooks.iml +0 -13
  32. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  33. package/.idea/jsLinters/eslint.xml +0 -6
  34. package/.idea/modules.xml +0 -9
  35. package/.idea/prettier.xml +0 -7
  36. package/.idea/vcs.xml +0 -7
  37. package/.prettierignore +0 -2
  38. package/.prettierrc.json +0 -9
  39. package/.yarn/plugins/@yarnpkg/plugin-typescript.cjs +0 -9
  40. package/.yarn/plugins/@yarnpkg/plugin-version.cjs +0 -550
  41. package/.yarn/versions/8b4bba28.yml +0 -0
  42. package/.yarn/versions/ee3e92fc.yml +0 -0
  43. package/dist/events.d.ts +0 -4
  44. package/dist/tsconfig.tsbuildinfo +0 -1
  45. package/lint-staged.config.cjs +0 -9
  46. package/src/events.ts +0 -6
package/.eslintrc.cjs CHANGED
@@ -1,54 +1,18 @@
1
1
  module.exports = {
2
- root: true,
3
- parser: '@typescript-eslint/parser',
4
2
  parserOptions: {
5
3
  ecmaFeatures: {
6
4
  jsx: true,
7
5
  },
8
6
  },
9
- plugins: ['@typescript-eslint', 'react', 'prettier'],
10
- extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
7
+ settings: {
8
+ react: {
9
+ version: 'detect',
10
+ },
11
+ },
12
+ plugins: ['react'],
13
+ extends: ['plugin:react/recommended'],
11
14
  rules: {
12
- 'prefer-const': 'error',
13
- 'no-unused-vars': 'off',
14
- 'no-cond-assign': ['error', 'always'],
15
- '@typescript-eslint/no-unused-vars': [
16
- 'error',
17
- { ignoreRestSiblings: true },
18
- ],
19
- '@typescript-eslint/no-explicit-any': 'error',
20
15
  'react/jsx-uses-react': 'error',
21
16
  'react/jsx-uses-vars': 'error',
22
- '@next/next/no-html-link-for-pages': 'off',
23
- 'prettier/prettier': 'error',
24
17
  },
25
- overrides: [
26
- {
27
- files: ['*.ts', '*.tsx'],
28
- extends: [
29
- 'plugin:@typescript-eslint/recommended',
30
- 'plugin:@typescript-eslint/recommended-requiring-type-checking',
31
- ],
32
- parserOptions: {
33
- tsconfigRootDir: __dirname,
34
- project: ['./tsconfig.json'],
35
- },
36
- },
37
- {
38
- files: ['*.js'],
39
- rules: {
40
- '@typescript-eslint/no-var-requires': 'off',
41
- },
42
- },
43
- ],
44
- ignorePatterns: [
45
- 'node_modules',
46
- '.fleet',
47
- '.yarn',
48
- '.idea',
49
- '.next',
50
- '.vercel',
51
- 'dist',
52
- '.pnp.*',
53
- ],
54
18
  };
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- var e=require("react"),t=require("@wiggindev/utils");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/n(e),r="undefined"!=typeof window?u.default.useLayoutEffect:u.default.useEffect,f=function(e){var t=u.default.useRef(e);return r(function(){t.current=e}),u.default.useMemo(function(){return t.current},[])};exports.useDocumentEventListener=function(e,n){var r=f(n);u.default.useEffect(function(){if(document&&document.addEventListener)return t.events.document.on(e,r),function(){return t.events.document.off(e,r)}},[e,r])},exports.useEvent=f,exports.useEventListener=function(e,n,r){var o=f(n);u.default.useEffect(function(){var n=r.current;if(n&&n.addEventListener)return t.events.element.on(n,e,o),function(){return t.events.element.off(n,e,o)}},[r,e,o])},exports.useIsomorphicLayoutEffect=r,exports.useWindowEventListener=function(e,n){var r=f(n);u.default.useEffect(function(){if(window&&window.addEventListener)return t.events.window.on(e,r),function(){return t.events.window.off(e,r)}},[e,r])};
1
+ var e=require("react"),t=require("@wiggindev/utils");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/n(e),r="undefined"!=typeof window?u.default.useLayoutEffect:u.default.useEffect,f=function(e){var t=u.default.useRef(e);return r(function(){t.current=e}),u.default.useMemo(function(){return t.current},[])};exports.useDocumentEventListener=function(e,n){var r=f(n);u.default.useEffect(function(){if(document&&document.addEventListener)return t.events.document.on(e,r),function(){return t.events.document.off(e,r)}},[e,r])},exports.useEvent=f,exports.useEventListener=function(e,n,r){var o=f(n);u.default.useEffect(function(){var n=r.current;if(n&&n.addEventListener)return t.events.element.on(n,e,o),function(){return t.events.element.off(n,e,o)}},[r,e,o])},exports.useIsomorphicLayoutEffect=r,exports.usePrevious=function(e){var t=u.default.useRef();return u.default.useEffect(function(){t.current=e},[e]),t.current},exports.useWindowEventListener=function(e,n){var r=f(n);u.default.useEffect(function(){if(window&&window.addEventListener)return t.events.window.on(e,r),function(){return t.events.window.off(e,r)}},[e,r])};
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype Callback = (...args: any[]) => any;\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","eventName","listener","stableListener","document","addEventListener","events","on","off","element","node"],"mappings":"qJAEaA,EACS,oBAAXC,OAAyBC,EAAAA,QAAMC,gBAAkBD,EAAAA,QAAME,UCErDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAK,QAACM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,UAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,sCCNZ,SACpCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKU,UAAaA,SAASC,iBAI3B,OADAC,EAAMA,OAACF,SAASG,GAAGN,EAAWE,GACjBG,WAAAA,OAAAA,EAAAA,OAAOF,SAASI,IAAIP,EAAWE,KAC7C,CAACF,EAAWE,iDCXa,SAI5BF,EACAC,EACAO,GAEA,IAAMN,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,IAAMgB,EAAOD,EAAQV,QACrB,GAAKW,GAASA,EAAKL,iBAInB,OADAC,EAAMA,OAACG,QAAQF,GAAGG,EAAMT,EAAWE,qBACtBG,EAAMA,OAACG,QAAQD,IAAIE,EAAMT,EAAWE,KAClD,CAACM,EAASR,EAAWE,wEChBU,SAClCF,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKH,QAAWA,OAAOc,iBAIvB,OADAC,EAAMA,OAACf,OAAOgB,GAAGN,EAAWE,GACfG,WAAAA,OAAAA,EAAAA,OAAOf,OAAOiB,IAAIP,EAAWE,KAC3C,CAACF,EAAWE"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/usePrevious.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { Callback } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\n\nexport const usePrevious = <T>(value: T) => {\n const stateRef = React.useRef<T>();\n React.useEffect(() => {\n stateRef.current = value;\n }, [value]);\n return stateRef.current;\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","eventName","listener","stableListener","document","addEventListener","events","on","off","element","node","value","stateRef"],"mappings":"qJAEaA,EACS,oBAAXC,OAAyBC,EAAAA,QAAMC,gBAAkBD,EAAAA,QAAME,UCCrDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAK,QAACM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,UAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,sCCLZ,SACpCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKU,UAAaA,SAASC,iBAI3B,OADAC,EAAMA,OAACF,SAASG,GAAGN,EAAWE,GACjBG,WAAAA,OAAAA,EAAAA,OAAOF,SAASI,IAAIP,EAAWE,KAC7C,CAACF,EAAWE,iDCXa,SAI5BF,EACAC,EACAO,GAEA,IAAMN,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,IAAMgB,EAAOD,EAAQV,QACrB,GAAKW,GAASA,EAAKL,iBAInB,OADAC,EAAMA,OAACG,QAAQF,GAAGG,EAAMT,EAAWE,qBACtBG,EAAMA,OAACG,QAAQD,IAAIE,EAAMT,EAAWE,KAClD,CAACM,EAASR,EAAWE,6DClBD,SAAIQ,GAC3B,IAAMC,EAAWpB,EAAK,QAACM,SAIvB,OAHAN,EAAK,QAACE,UAAU,WACZkB,EAASb,QAAUY,GACpB,CAACA,IACGC,EAASb,wCCHkB,SAClCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKH,QAAWA,OAAOc,iBAIvB,OADAC,EAAMA,OAACf,OAAOgB,GAAGN,EAAWE,GACfG,WAAAA,OAAAA,EAAAA,OAAOf,OAAOiB,IAAIP,EAAWE,KAC3C,CAACF,EAAWE"}
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- export * from './useIsomorphicLayoutEffect';
2
- export * from './useEvent';
3
- export * from './useEventListener';
4
- export * from './useDocumentEventListener';
5
- export * from './useWindowEventListener';
1
+ export * from './useIsomorphicLayoutEffect';
2
+ export * from './useEvent';
3
+ export * from './useEventListener';
4
+ export * from './useDocumentEventListener';
5
+ export * from './useWindowEventListener';
6
+ export * from './usePrevious';
@@ -1,2 +1,52 @@
1
- import e from"react";import{events as t}from"@wiggindev/utils";const n="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,o=t=>{const o=e.useRef(t);return n(()=>{o.current=t}),e.useMemo(()=>o.current,[])},f=(n,f,r)=>{const u=o(f);e.useEffect(()=>{const e=r.current;if(e&&e.addEventListener)return t.element.on(e,n,u),()=>t.element.off(e,n,u)},[r,n,u])},r=(n,f)=>{const r=o(f);e.useEffect(()=>{if(document&&document.addEventListener)return t.document.on(n,r),()=>t.document.off(n,r)},[n,r])},u=(n,f)=>{const r=o(f);e.useEffect(()=>{if(window&&window.addEventListener)return t.window.on(n,r),()=>t.window.off(n,r)},[n,r])};export{r as useDocumentEventListener,o as useEvent,f as useEventListener,n as useIsomorphicLayoutEffect,u as useWindowEventListener};
1
+ import e from 'react';
2
+ import { events as t } from '@wiggindev/utils';
3
+ const n = 'undefined' != typeof window ? e.useLayoutEffect : e.useEffect,
4
+ o = t => {
5
+ const o = e.useRef(t);
6
+ return (
7
+ n(() => {
8
+ o.current = t;
9
+ }),
10
+ e.useMemo(() => o.current, [])
11
+ );
12
+ },
13
+ r = (n, r, f) => {
14
+ const u = o(r);
15
+ e.useEffect(() => {
16
+ const e = f.current;
17
+ if (e && e.addEventListener)
18
+ return t.element.on(e, n, u), () => t.element.off(e, n, u);
19
+ }, [f, n, u]);
20
+ },
21
+ f = (n, r) => {
22
+ const f = o(r);
23
+ e.useEffect(() => {
24
+ if (document && document.addEventListener)
25
+ return t.document.on(n, f), () => t.document.off(n, f);
26
+ }, [n, f]);
27
+ },
28
+ u = (n, r) => {
29
+ const f = o(r);
30
+ e.useEffect(() => {
31
+ if (window && window.addEventListener)
32
+ return t.window.on(n, f), () => t.window.off(n, f);
33
+ }, [n, f]);
34
+ },
35
+ c = t => {
36
+ const n = e.useRef();
37
+ return (
38
+ e.useEffect(() => {
39
+ n.current = t;
40
+ }, [t]),
41
+ n.current
42
+ );
43
+ };
44
+ export {
45
+ f as useDocumentEventListener,
46
+ o as useEvent,
47
+ r as useEventListener,
48
+ n as useIsomorphicLayoutEffect,
49
+ c as usePrevious,
50
+ u as useWindowEventListener,
51
+ };
2
52
  //# sourceMappingURL=index.modern.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.modern.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useEventListener.ts","../src/useDocumentEventListener.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype Callback = (...args: any[]) => any;\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","useEventListener","eventName","listener","element","stableListener","node","addEventListener","events","on","off","useDocumentEventListener","document","useWindowEventListener"],"mappings":"+DAEaA,MAAAA,EACS,oBAAXC,OAAyBC,EAAMC,gBAAkBD,EAAME,UCErDC,EAAgCC,IACzC,MAAMC,EAAcL,EAAMM,OAAOF,GAIjC,OAHAN,EAA0B,KACtBO,EAAYE,QAAUH,IAEnBJ,EAAMQ,QAAQ,IAAMH,EAAYE,QAAS,KCNvCE,EAAmB,CAI5BC,EACAC,EACAC,KAEA,MAAMC,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,MAAMY,EAAOF,EAAQL,QACrB,GAAKO,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWG,GAC5B,IAAMG,EAAOJ,QAAQM,IAAIJ,EAAMJ,EAAWG,IAClD,CAACD,EAASF,EAAWG,KChBfM,EAA2B,CACpCT,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKkB,UAAaA,SAASL,iBAI3B,OADAC,EAAOI,SAASH,GAAGP,EAAWG,GACvB,IAAMG,EAAOI,SAASF,IAAIR,EAAWG,IAC7C,CAACH,EAAWG,KCXNQ,EAAyB,CAClCX,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKH,QAAWA,OAAOgB,iBAIvB,OADAC,EAAOjB,OAAOkB,GAAGP,EAAWG,GACrB,IAAMG,EAAOjB,OAAOmB,IAAIR,EAAWG,IAC3C,CAACH,EAAWG"}
1
+ {"version":3,"file":"index.modern.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useEventListener.ts","../src/useDocumentEventListener.ts","../src/useWindowEventListener.ts","../src/usePrevious.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { Callback } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\n\nexport const usePrevious = <T>(value: T) => {\n const stateRef = React.useRef<T>();\n React.useEffect(() => {\n stateRef.current = value;\n }, [value]);\n return stateRef.current;\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","useEventListener","eventName","listener","element","stableListener","node","addEventListener","events","on","off","useDocumentEventListener","document","useWindowEventListener","usePrevious","value","stateRef"],"mappings":"+DAEaA,MAAAA,EACS,oBAAXC,OAAyBC,EAAMC,gBAAkBD,EAAME,UCCrDC,EAAgCC,IACzC,MAAMC,EAAcL,EAAMM,OAAOF,GAIjC,OAHAN,EAA0B,KACtBO,EAAYE,QAAUH,IAEnBJ,EAAMQ,QAAQ,IAAMH,EAAYE,QAAS,KCLvCE,EAAmB,CAI5BC,EACAC,EACAC,KAEA,MAAMC,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,MAAMY,EAAOF,EAAQL,QACrB,GAAKO,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWG,GAC5B,IAAMG,EAAOJ,QAAQM,IAAIJ,EAAMJ,EAAWG,IAClD,CAACD,EAASF,EAAWG,KChBfM,EAA2B,CACpCT,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKkB,UAAaA,SAASL,iBAI3B,OADAC,EAAOI,SAASH,GAAGP,EAAWG,GACvB,IAAMG,EAAOI,SAASF,IAAIR,EAAWG,IAC7C,CAACH,EAAWG,KCXNQ,EAAyB,CAClCX,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKH,QAAWA,OAAOgB,iBAIvB,OADAC,EAAOjB,OAAOkB,GAAGP,EAAWG,GACrB,IAAMG,EAAOjB,OAAOmB,IAAIR,EAAWG,IAC3C,CAACH,EAAWG,KCbNS,EAAkBC,IAC3B,MAAMC,EAAWxB,EAAMM,SAIvB,OAHAN,EAAME,UAAU,KACZsB,EAASjB,QAAUgB,GACpB,CAACA,IACGC,EAASjB"}
@@ -1,2 +1,81 @@
1
- import n from"react";import{events as e}from"@wiggindev/utils";var t="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,r=function(e){var r=n.useRef(e);return t(function(){r.current=e}),n.useMemo(function(){return r.current},[])},u=function(t,u,f){var o=r(u);n.useEffect(function(){var n=f.current;if(n&&n.addEventListener)return e.element.on(n,t,o),function(){return e.element.off(n,t,o)}},[f,t,o])},f=function(t,u){var f=r(u);n.useEffect(function(){if(document&&document.addEventListener)return e.document.on(t,f),function(){return e.document.off(t,f)}},[t,f])},o=function(t,u){var f=r(u);n.useEffect(function(){if(window&&window.addEventListener)return e.window.on(t,f),function(){return e.window.off(t,f)}},[t,f])};export{f as useDocumentEventListener,r as useEvent,u as useEventListener,t as useIsomorphicLayoutEffect,o as useWindowEventListener};
1
+ import n from 'react';
2
+ import { events as e } from '@wiggindev/utils';
3
+ var t = 'undefined' != typeof window ? n.useLayoutEffect : n.useEffect,
4
+ r = function (e) {
5
+ var r = n.useRef(e);
6
+ return (
7
+ t(function () {
8
+ r.current = e;
9
+ }),
10
+ n.useMemo(function () {
11
+ return r.current;
12
+ }, [])
13
+ );
14
+ },
15
+ u = function (t, u, f) {
16
+ var o = r(u);
17
+ n.useEffect(
18
+ function () {
19
+ var n = f.current;
20
+ if (n && n.addEventListener)
21
+ return (
22
+ e.element.on(n, t, o),
23
+ function () {
24
+ return e.element.off(n, t, o);
25
+ }
26
+ );
27
+ },
28
+ [f, t, o]
29
+ );
30
+ },
31
+ f = function (t, u) {
32
+ var f = r(u);
33
+ n.useEffect(
34
+ function () {
35
+ if (document && document.addEventListener)
36
+ return (
37
+ e.document.on(t, f),
38
+ function () {
39
+ return e.document.off(t, f);
40
+ }
41
+ );
42
+ },
43
+ [t, f]
44
+ );
45
+ },
46
+ o = function (t, u) {
47
+ var f = r(u);
48
+ n.useEffect(
49
+ function () {
50
+ if (window && window.addEventListener)
51
+ return (
52
+ e.window.on(t, f),
53
+ function () {
54
+ return e.window.off(t, f);
55
+ }
56
+ );
57
+ },
58
+ [t, f]
59
+ );
60
+ },
61
+ i = function (e) {
62
+ var t = n.useRef();
63
+ return (
64
+ n.useEffect(
65
+ function () {
66
+ t.current = e;
67
+ },
68
+ [e]
69
+ ),
70
+ t.current
71
+ );
72
+ };
73
+ export {
74
+ f as useDocumentEventListener,
75
+ r as useEvent,
76
+ u as useEventListener,
77
+ t as useIsomorphicLayoutEffect,
78
+ i as usePrevious,
79
+ o as useWindowEventListener,
80
+ };
2
81
  //# sourceMappingURL=index.module.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useEventListener.ts","../src/useDocumentEventListener.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype Callback = (...args: any[]) => any;\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","useEventListener","eventName","listener","element","stableListener","node","addEventListener","events","on","off","useDocumentEventListener","document","useWindowEventListener"],"mappings":"+DAEaA,IAAAA,EACS,oBAAXC,OAAyBC,EAAMC,gBAAkBD,EAAME,UCErDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAMM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,EAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,KCNvCE,EAAmB,SAI5BC,EACAC,EACAC,GAEA,IAAMC,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,IAAMY,EAAOF,EAAQL,QACrB,GAAKO,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWG,qBACtBG,EAAOJ,QAAQM,IAAIJ,EAAMJ,EAAWG,KAClD,CAACD,EAASF,EAAWG,KChBfM,EAA2B,SACpCT,EACAC,GAEA,IAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,GAAKkB,UAAaA,SAASL,iBAI3B,OADAC,EAAOI,SAASH,GAAGP,EAAWG,GACjBG,WAAAA,OAAAA,EAAOI,SAASF,IAAIR,EAAWG,KAC7C,CAACH,EAAWG,KCXNQ,EAAyB,SAClCX,EACAC,GAEA,IAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,GAAKH,QAAWA,OAAOgB,iBAIvB,OADAC,EAAOjB,OAAOkB,GAAGP,EAAWG,GACfG,WAAAA,OAAAA,EAAOjB,OAAOmB,IAAIR,EAAWG,KAC3C,CAACH,EAAWG"}
1
+ {"version":3,"file":"index.module.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useEventListener.ts","../src/useDocumentEventListener.ts","../src/useWindowEventListener.ts","../src/usePrevious.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { Callback } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\n\nexport const usePrevious = <T>(value: T) => {\n const stateRef = React.useRef<T>();\n React.useEffect(() => {\n stateRef.current = value;\n }, [value]);\n return stateRef.current;\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","useEventListener","eventName","listener","element","stableListener","node","addEventListener","events","on","off","useDocumentEventListener","document","useWindowEventListener","usePrevious","value","stateRef"],"mappings":"+DAEaA,IAAAA,EACS,oBAAXC,OAAyBC,EAAMC,gBAAkBD,EAAME,UCCrDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAMM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,EAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,KCLvCE,EAAmB,SAI5BC,EACAC,EACAC,GAEA,IAAMC,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,IAAMY,EAAOF,EAAQL,QACrB,GAAKO,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWG,qBACtBG,EAAOJ,QAAQM,IAAIJ,EAAMJ,EAAWG,KAClD,CAACD,EAASF,EAAWG,KChBfM,EAA2B,SACpCT,EACAC,GAEA,IAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,GAAKkB,UAAaA,SAASL,iBAI3B,OADAC,EAAOI,SAASH,GAAGP,EAAWG,GACjBG,WAAAA,OAAAA,EAAOI,SAASF,IAAIR,EAAWG,KAC7C,CAACH,EAAWG,KCXNQ,EAAyB,SAClCX,EACAC,GAEA,IAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,WACZ,GAAKH,QAAWA,OAAOgB,iBAIvB,OADAC,EAAOjB,OAAOkB,GAAGP,EAAWG,GACfG,WAAAA,OAAAA,EAAOjB,OAAOmB,IAAIR,EAAWG,KAC3C,CAACH,EAAWG,KCbNS,EAAc,SAAIC,GAC3B,IAAMC,EAAWxB,EAAMM,SAIvB,OAHAN,EAAME,UAAU,WACZsB,EAASjB,QAAUgB,GACpB,CAACA,IACGC,EAASjB"}
package/dist/index.umd.js CHANGED
@@ -1,2 +1,88 @@
1
- !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@wiggindev/utils")):"function"==typeof define&&define.amd?define(["exports","react","@wiggindev/utils"],n):n((e||self).hooks={},e.react,e.utils)}(this,function(e,n,t){function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=/*#__PURE__*/u(n),o="undefined"!=typeof window?f.default.useLayoutEffect:f.default.useEffect,i=function(e){var n=f.default.useRef(e);return o(function(){n.current=e}),f.default.useMemo(function(){return n.current},[])};e.useDocumentEventListener=function(e,n){var u=i(n);f.default.useEffect(function(){if(document&&document.addEventListener)return t.events.document.on(e,u),function(){return t.events.document.off(e,u)}},[e,u])},e.useEvent=i,e.useEventListener=function(e,n,u){var o=i(n);f.default.useEffect(function(){var n=u.current;if(n&&n.addEventListener)return t.events.element.on(n,e,o),function(){return t.events.element.off(n,e,o)}},[u,e,o])},e.useIsomorphicLayoutEffect=o,e.useWindowEventListener=function(e,n){var u=i(n);f.default.useEffect(function(){if(window&&window.addEventListener)return t.events.window.on(e,u),function(){return t.events.window.off(e,u)}},[e,u])}});
1
+ !(function (e, n) {
2
+ 'object' == typeof exports && 'undefined' != typeof module
3
+ ? n(exports, require('react'), require('@wiggindev/utils'))
4
+ : 'function' == typeof define && define.amd
5
+ ? define(['exports', 'react', '@wiggindev/utils'], n)
6
+ : n(((e || self).hooks = {}), e.react, e.utils);
7
+ })(this, function (e, n, t) {
8
+ function u(e) {
9
+ return e && 'object' == typeof e && 'default' in e ? e : { default: e };
10
+ }
11
+ var f = /*#__PURE__*/ u(n),
12
+ o =
13
+ 'undefined' != typeof window
14
+ ? f.default.useLayoutEffect
15
+ : f.default.useEffect,
16
+ r = function (e) {
17
+ var n = f.default.useRef(e);
18
+ return (
19
+ o(function () {
20
+ n.current = e;
21
+ }),
22
+ f.default.useMemo(function () {
23
+ return n.current;
24
+ }, [])
25
+ );
26
+ };
27
+ (e.useDocumentEventListener = function (e, n) {
28
+ var u = r(n);
29
+ f.default.useEffect(
30
+ function () {
31
+ if (document && document.addEventListener)
32
+ return (
33
+ t.events.document.on(e, u),
34
+ function () {
35
+ return t.events.document.off(e, u);
36
+ }
37
+ );
38
+ },
39
+ [e, u]
40
+ );
41
+ }),
42
+ (e.useEvent = r),
43
+ (e.useEventListener = function (e, n, u) {
44
+ var o = r(n);
45
+ f.default.useEffect(
46
+ function () {
47
+ var n = u.current;
48
+ if (n && n.addEventListener)
49
+ return (
50
+ t.events.element.on(n, e, o),
51
+ function () {
52
+ return t.events.element.off(n, e, o);
53
+ }
54
+ );
55
+ },
56
+ [u, e, o]
57
+ );
58
+ }),
59
+ (e.useIsomorphicLayoutEffect = o),
60
+ (e.usePrevious = function (e) {
61
+ var n = f.default.useRef();
62
+ return (
63
+ f.default.useEffect(
64
+ function () {
65
+ n.current = e;
66
+ },
67
+ [e]
68
+ ),
69
+ n.current
70
+ );
71
+ }),
72
+ (e.useWindowEventListener = function (e, n) {
73
+ var u = r(n);
74
+ f.default.useEffect(
75
+ function () {
76
+ if (window && window.addEventListener)
77
+ return (
78
+ t.events.window.on(e, u),
79
+ function () {
80
+ return t.events.window.off(e, u);
81
+ }
82
+ );
83
+ },
84
+ [e, u]
85
+ );
86
+ });
87
+ });
2
88
  //# sourceMappingURL=index.umd.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype Callback = (...args: any[]) => any;\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { useEvent } from './useEvent';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","eventName","listener","stableListener","document","addEventListener","events","on","off","element","node"],"mappings":"2ZAEaA,EACS,oBAAXC,OAAyBC,EAAAA,QAAMC,gBAAkBD,EAAAA,QAAME,UCErDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAK,QAACM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,UAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,gCCNZ,SACpCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKU,UAAaA,SAASC,iBAI3B,OADAC,EAAMA,OAACF,SAASG,GAAGN,EAAWE,GACjBG,WAAAA,OAAAA,EAAAA,OAAOF,SAASI,IAAIP,EAAWE,KAC7C,CAACF,EAAWE,qCCXa,SAI5BF,EACAC,EACAO,GAEA,IAAMN,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,IAAMgB,EAAOD,EAAQV,QACrB,GAAKW,GAASA,EAAKL,iBAInB,OADAC,EAAMA,OAACG,QAAQF,GAAGG,EAAMT,EAAWE,qBACtBG,EAAMA,OAACG,QAAQD,IAAIE,EAAMT,EAAWE,KAClD,CAACM,EAASR,EAAWE,4DChBU,SAClCF,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKH,QAAWA,OAAOc,iBAIvB,OADAC,EAAMA,OAACf,OAAOgB,GAAGN,EAAWE,GACfG,WAAAA,OAAAA,EAAAA,OAAOf,OAAOiB,IAAIP,EAAWE,KAC3C,CAACF,EAAWE"}
1
+ {"version":3,"file":"index.umd.js","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/usePrevious.ts","../src/useWindowEventListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { Callback } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport const useEvent = <C extends Callback>(callback: C): C => {\n const callbackRef = React.useRef(callback);\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = callback;\n });\n return React.useMemo(() => callbackRef.current, []);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(\n eventName: K,\n listener: EventListener<DocumentEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!document || !document.addEventListener) {\n return;\n }\n events.document.on(eventName, stableListener);\n return () => events.document.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useEventListener = <\n K extends EventName<HTMLElementEventMap>,\n E extends HTMLElement\n>(\n eventName: K,\n listener: EventListener<HTMLElementEventMap, K>,\n element: React.RefObject<E>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n const node = element.current;\n if (!node || !node.addEventListener) {\n return;\n }\n events.element.on(node, eventName, stableListener);\n return () => events.element.off(node, eventName, stableListener);\n }, [element, eventName, stableListener]);\n};\n","import React from 'react';\n\nexport const usePrevious = <T>(value: T) => {\n const stateRef = React.useRef<T>();\n React.useEffect(() => {\n stateRef.current = value;\n }, [value]);\n return stateRef.current;\n};\n","import React from 'react';\nimport { events, EventName, EventListener } from '@wiggindev/utils';\nimport { useEvent } from './useEvent';\n\nexport const useWindowEventListener = <K extends EventName<WindowEventMap>>(\n eventName: K,\n listener: EventListener<WindowEventMap, K>\n) => {\n const stableListener = useEvent(listener);\n React.useEffect(() => {\n if (!window || !window.addEventListener) {\n return;\n }\n events.window.on(eventName, stableListener);\n return () => events.window.off(eventName, stableListener);\n }, [eventName, stableListener]);\n};\n"],"names":["useIsomorphicLayoutEffect","window","React","useLayoutEffect","useEffect","useEvent","callback","callbackRef","useRef","current","useMemo","eventName","listener","stableListener","document","addEventListener","events","on","off","element","node","value","stateRef"],"mappings":"2ZAEaA,EACS,oBAAXC,OAAyBC,EAAAA,QAAMC,gBAAkBD,EAAAA,QAAME,UCCrDC,EAAW,SAAqBC,GACzC,IAAMC,EAAcL,EAAK,QAACM,OAAOF,GAIjC,OAHAN,EAA0B,WACtBO,EAAYE,QAAUH,IAEnBJ,UAAMQ,QAAQ,WAAA,OAAMH,EAAYE,SAAS,gCCLZ,SACpCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKU,UAAaA,SAASC,iBAI3B,OADAC,EAAMA,OAACF,SAASG,GAAGN,EAAWE,GACjBG,WAAAA,OAAAA,EAAAA,OAAOF,SAASI,IAAIP,EAAWE,KAC7C,CAACF,EAAWE,qCCXa,SAI5BF,EACAC,EACAO,GAEA,IAAMN,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,IAAMgB,EAAOD,EAAQV,QACrB,GAAKW,GAASA,EAAKL,iBAInB,OADAC,EAAMA,OAACG,QAAQF,GAAGG,EAAMT,EAAWE,qBACtBG,EAAMA,OAACG,QAAQD,IAAIE,EAAMT,EAAWE,KAClD,CAACM,EAASR,EAAWE,iDClBD,SAAIQ,GAC3B,IAAMC,EAAWpB,EAAK,QAACM,SAIvB,OAHAN,EAAK,QAACE,UAAU,WACZkB,EAASb,QAAUY,GACpB,CAACA,IACGC,EAASb,kCCHkB,SAClCE,EACAC,GAEA,IAAMC,EAAiBR,EAASO,GAChCV,EAAK,QAACE,UAAU,WACZ,GAAKH,QAAWA,OAAOc,iBAIvB,OADAC,EAAMA,OAACf,OAAOgB,GAAGN,EAAWE,GACfG,WAAAA,OAAAA,EAAAA,OAAOf,OAAOiB,IAAIP,EAAWE,KAC3C,CAACF,EAAWE"}
@@ -1,2 +1,7 @@
1
- import { EventListener } from '@wiggindev/utils';
2
- export declare const useDocumentEventListener: <K extends string>(eventName: K, listener: EventListener<DocumentEventMap, K>) => void;
1
+ import { EventName, EventListener } from '@wiggindev/utils';
2
+ export declare const useDocumentEventListener: <
3
+ K extends EventName<DocumentEventMap>
4
+ >(
5
+ eventName: K,
6
+ listener: EventListener<DocumentEventMap, K>
7
+ ) => void;
@@ -1,3 +1,2 @@
1
- declare type Callback = (...args: any[]) => any;
2
- export declare const useEvent: <C extends Callback>(callback: C) => C;
3
- export {};
1
+ import { Callback } from '@wiggindev/utils';
2
+ export declare const useEvent: <C extends Callback>(callback: C) => C;
@@ -1,3 +1,10 @@
1
- import React from 'react';
2
- import { EventListener } from '@wiggindev/utils';
3
- export declare const useEventListener: <K extends string, E extends HTMLElement>(eventName: K, listener: EventListener<HTMLElementEventMap, K>, element: React.RefObject<E>) => void;
1
+ import React from 'react';
2
+ import { EventName, EventListener } from '@wiggindev/utils';
3
+ export declare const useEventListener: <
4
+ K extends EventName<HTMLElementEventMap>,
5
+ E extends HTMLElement
6
+ >(
7
+ eventName: K,
8
+ listener: EventListener<HTMLElementEventMap, K>,
9
+ element: React.RefObject<E>
10
+ ) => void;
@@ -1,2 +1,2 @@
1
- import React from 'react';
2
- export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
1
+ import React from 'react';
2
+ export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
@@ -0,0 +1 @@
1
+ export declare const usePrevious: <T>(value: T) => T | undefined;
@@ -0,0 +1,4 @@
1
+ export declare const useWindowDimensions: (throttleLimit?: number) => {
2
+ width: number;
3
+ height: number;
4
+ };
@@ -1,2 +1,7 @@
1
- import { EventListener } from '@wiggindev/utils';
2
- export declare const useWindowEventListener: <K extends string>(eventName: K, listener: EventListener<WindowEventMap, K>) => void;
1
+ import { EventName, EventListener } from '@wiggindev/utils';
2
+ export declare const useWindowEventListener: <
3
+ K extends EventName<WindowEventMap>
4
+ >(
5
+ eventName: K,
6
+ listener: EventListener<WindowEventMap, K>
7
+ ) => void;
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@wiggindev/hooks",
3
3
  "description": "Various hooks that I use in my projects",
4
- "version": "0.1.3",
4
+ "version": "0.2.2",
5
5
  "author": {
6
6
  "name": "Andrew Wiggin",
7
7
  "email": "andrew@wiggin.dev",
8
8
  "url": "https://wiggin.dev"
9
9
  },
10
+ "repository": "git://github.com/wiggindev/hooks",
10
11
  "type": "module",
11
12
  "source": "src/index.ts",
12
13
  "exports": {
@@ -18,36 +19,20 @@
18
19
  "unpkg": "dist/index.umd.js",
19
20
  "types": "dist/index.d.ts",
20
21
  "scripts": {
21
- "prebuild": "rimraf dist",
22
- "build": "microbundle -f es,cjs,modern",
23
- "dev": "microbundle -f es,cjs,modern watch",
24
- "_postinstall": "husky install",
25
- "prepack": "pinst --disable",
26
- "postpack": "pinst --enable",
27
- "lint": "tsc --noEmit && yarn eslint",
28
- "format": "yarn eslint --fix && yarn prettier --write ."
22
+ "build": "rm -rf dist && microbundle",
23
+ "dev": "rm -rf dist && microbundle watch"
29
24
  },
30
25
  "dependencies": {
31
- "@wiggindev/utils": "latest"
26
+ "@wiggindev/utils": "*"
32
27
  },
33
28
  "peerDependencies": {
34
29
  "react": ">= 18"
35
30
  },
36
31
  "devDependencies": {
37
32
  "@types/react": "^18.0.9",
38
- "@typescript-eslint/eslint-plugin": "^5.23.0",
39
- "@typescript-eslint/parser": "^5.23.0",
40
- "eslint": "^8.15.0",
41
- "eslint-config-prettier": "^8.5.0",
42
- "eslint-plugin-prettier": "^4.0.0",
43
33
  "eslint-plugin-react": "^7.29.4",
44
- "husky": "^8.0.1",
45
- "lint-staged": "^12.4.1",
46
34
  "microbundle": "^0.15.0",
47
- "pinst": "^3.0.0",
48
- "prettier": "^2.6.2",
49
- "rimraf": "^3.0.2",
50
- "typescript": "^4.6.4"
35
+ "react": "^18.1.0"
51
36
  },
52
37
  "packageManager": "yarn@3.2.1",
53
38
  "publishConfig": {
package/src/index.ts CHANGED
@@ -3,3 +3,5 @@ export * from './useEvent';
3
3
  export * from './useEventListener';
4
4
  export * from './useDocumentEventListener';
5
5
  export * from './useWindowEventListener';
6
+ export * from './usePrevious';
7
+ export * from './useWindowDimensions';
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { useEvent } from './useEvent';
3
2
  import { events, EventName, EventListener } from '@wiggindev/utils';
3
+ import { useEvent } from './useEvent';
4
4
 
5
5
  export const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(
6
6
  eventName: K,
package/src/useEvent.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
+ import { Callback } from '@wiggindev/utils';
2
3
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
3
4
 
4
- type Callback = (...args: any[]) => any;
5
-
6
5
  export const useEvent = <C extends Callback>(callback: C): C => {
7
6
  const callbackRef = React.useRef(callback);
8
7
  useIsomorphicLayoutEffect(() => {
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { useEvent } from './useEvent';
3
2
  import { events, EventName, EventListener } from '@wiggindev/utils';
3
+ import { useEvent } from './useEvent';
4
4
 
5
5
  export const useEventListener = <
6
6
  K extends EventName<HTMLElementEventMap>,
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+
3
+ export const usePrevious = <T>(value: T) => {
4
+ const stateRef = React.useRef<T>();
5
+ React.useEffect(() => {
6
+ stateRef.current = value;
7
+ }, [value]);
8
+ return stateRef.current;
9
+ };
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { throttle } from '@wiggindev/utils';
3
+ import { useWindowEventListener } from './useWindowEventListener';
4
+ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
5
+ import { useEvent } from './useEvent';
6
+
7
+ const getWindowDimensions = () => {
8
+ const { innerWidth: width, innerHeight: height } = window;
9
+ return {
10
+ width,
11
+ height,
12
+ };
13
+ };
14
+
15
+ export const useWindowDimensions = (throttleLimit = 250) => {
16
+ const [windowDimensions, setWindowDimensions] = React.useState({
17
+ width: 0,
18
+ height: 0,
19
+ });
20
+
21
+ const updateWindowDimensions = () =>
22
+ setWindowDimensions(getWindowDimensions());
23
+ const handleResize = useEvent(
24
+ throttle(updateWindowDimensions, throttleLimit)
25
+ );
26
+
27
+ useWindowEventListener('resize', handleResize);
28
+
29
+ useIsomorphicLayoutEffect(() => {
30
+ updateWindowDimensions();
31
+ }, []);
32
+
33
+ return windowDimensions;
34
+ };
package/tsconfig.json CHANGED
@@ -1,27 +1,8 @@
1
1
  {
2
+ "extends": "../../tsconfig.json",
2
3
  "compilerOptions": {
3
- "outDir": "dist",
4
- "module": "esnext",
5
- "target": "esnext",
6
- "lib": ["dom", "dom.iterable", "esnext"],
7
- "allowJs": true,
8
- "strict": true,
9
- "forceConsistentCasingInFileNames": true,
10
- "noEmit": true,
11
- "esModuleInterop": true,
12
- "moduleResolution": "node",
13
- "resolveJsonModule": true,
14
- "isolatedModules": true,
15
- "incremental": true
4
+ "outDir": "dist"
16
5
  },
17
6
  "include": ["src/**/*"],
18
- "exclude": [
19
- "node_modules",
20
- ".fleet",
21
- ".yarn",
22
- ".idea",
23
- ".next",
24
- ".vercel",
25
- "dist"
26
- ]
7
+ "exclude": ["dist"]
27
8
  }