@wiggindev/hooks 0.2.4 → 0.2.9
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.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/useDocumentEventListener.d.ts +1 -1
- package/dist/useEvent.d.ts +2 -2
- package/dist/useEventListener.d.ts +1 -1
- package/dist/useWindowEventListener.d.ts +1 -1
- package/package.json +50 -41
- package/.eslintrc.cjs +0 -18
- package/src/index.ts +0 -7
- package/src/useDocumentEventListener.ts +0 -17
- package/src/useEvent.ts +0 -11
- package/src/useEventListener.ts +0 -22
- package/src/useIsomorphicLayoutEffect.ts +0 -4
- package/src/usePrevious.ts +0 -9
- package/src/useWindowDimensions.ts +0 -34
- package/src/useWindowEventListener.ts +0 -17
- package/tsconfig.json +0 -8
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=require("react"),t=require("@wiggindev/utils");function
|
|
1
|
+
var e=require("react"),t=require("@wiggindev/events"),n=require("@wiggindev/utils");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/u(e),f=/*#__PURE__*/u(t),o="undefined"!=typeof window?r.default.useLayoutEffect:r.default.useEffect;function i(e){var t=r.default.useRef(d);o(function(){t.current=e},[e]);var n=r.default.useRef(null);return n.current||(n.current=t.current),n.current}var d=function(){throw new Error("INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")},c=function(e,t){var n=i(t);r.default.useEffect(function(){if(window&&window.addEventListener)return f.default.window.on(e,n),function(){return f.default.window.off(e,n)}},[e,n])};exports.useDocumentEventListener=function(e,t){var n=i(t);r.default.useEffect(function(){if(document&&document.addEventListener)return f.default.document.on(e,n),function(){return f.default.document.off(e,n)}},[e,n])},exports.useEvent=i,exports.useEventListener=function(e,t,n){var u=i(t);r.default.useEffect(function(){var t=n.current;if(t&&t.addEventListener)return f.default.element.on(t,e,u),function(){return f.default.element.off(t,e,u)}},[n,e,u])},exports.useIsomorphicLayoutEffect=o,exports.usePrevious=function(e){var t=r.default.useRef();return r.default.useEffect(function(){t.current=e},[e]),t.current},exports.useWindowDimensions=function(e){void 0===e&&(e=250);var t=r.default.useState({width:0,height:0}),u=t[0],f=t[1],d=function(){return f({width:(e=window).innerWidth,height:e.innerHeight});var e},a=i(n.throttle(d,e));return c("resize",a),o(function(){d()},[]),u},exports.useWindowEventListener=c;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useWindowEventListener.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/usePrevious.ts","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/useIsomorphicLayoutEffect.ts","../src/useEvent.ts","../src/useWindowEventListener.ts","../src/useDocumentEventListener.ts","../src/useEventListener.ts","../src/usePrevious.ts","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { AnyFunction } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport function useEvent<C extends AnyFunction>(callback: C): C {\n const latestRef = React.useRef<C>(\n throwInvokedBeforeMountError as unknown as C\n );\n useIsomorphicLayoutEffect(() => {\n latestRef.current = callback;\n }, [callback]);\n\n const stableRef = React.useRef<C>(null as unknown as C);\n if (!stableRef.current) {\n stableRef.current = latestRef.current;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n return stableRef.current;\n}\n\nconst throwInvokedBeforeMountError = () => {\n throw new Error(\n 'INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.'\n );\n};\n","import React from 'react';\nimport events, { EventName, EventListener } from '@wiggindev/events';\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';\nimport events, { EventName, EventListener } from '@wiggindev/events';\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 from '@wiggindev/events';\nimport type { EventName, EventListener } from '@wiggindev/events';\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 { throttle } from '@wiggindev/utils';\nimport { useWindowEventListener } from './useWindowEventListener';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nimport { useEvent } from './useEvent';\n\nconst getWindowDimensions = () => {\n const { innerWidth: width, innerHeight: height } = window;\n return {\n width,\n height,\n };\n};\n\nexport const useWindowDimensions = (throttleLimit = 250) => {\n const [windowDimensions, setWindowDimensions] = React.useState({\n width: 0,\n height: 0,\n });\n\n const updateWindowDimensions = () =>\n setWindowDimensions(getWindowDimensions());\n const handleResize = useEvent(\n throttle(updateWindowDimensions, throttleLimit)\n );\n\n useWindowEventListener('resize', handleResize);\n\n useIsomorphicLayoutEffect(() => {\n updateWindowDimensions();\n }, []);\n\n return windowDimensions;\n};\n"],"names":["React","useLayoutEffect","useEffect","callback","useRef","throwInvokedBeforeMountError","useIsomorphicLayoutEffect","latestRef","current","stableRef","eventName","listener","useEvent","window","addEventListener","events","on","stableListener","off","document","element","node","value","stateRef","throttleLimit","useState","width","height","windowDimensions","setWindowDimensions","_React$useState","innerWidth","innerHeight","handleResize","throttle","updateWindowDimensions","useWindowEventListener"],"mappings":"0MAGsB,2BAAcA,EAAAA,QAAMC,gBAAkBD,EAAAA,QAAME,UCC5D,WAA0CC,GAC5C,MAAkBH,EAAAA,QAAMI,OACpBC,GAEJC,EAA0B,WACtBC,EAAUC,QAAUL,GACrB,CAACA,IAEJ,IAAMM,EAAYT,UAAMI,OAAU,MAMlC,OALKK,EAAUD,UACXC,EAAUD,QAAUD,EAAUC,SAI3BC,EAAUD,QAGrB,IAAkCH,EAAG,WACjC,MAAM,UACF,kHCnB8B,SAClCK,EACAC,GAEA,MAAuBC,EAASD,GAChCX,EAAK,QAACE,UAAU,WACZ,GAAKW,QAAWA,OAAOC,iBAIvB,OADAC,EAAM,QAACF,OAAOG,GAAGN,EAAWO,GACfF,WAAAA,OAAAA,EAAAA,QAAOF,OAAOK,IAAIR,EAAWO,KAC3C,CAACP,EAAWO,sCCXqB,SACpCP,EACAC,GAEA,MAAuBC,EAASD,GAChCX,EAAK,QAACE,UAAU,WACZ,GAAKiB,UAAaA,SAASL,iBAI3B,OADAC,EAAM,QAACI,SAASH,GAAGN,EAAWO,GACjBF,WAAAA,OAAAA,EAAAA,QAAOI,SAASD,IAAIR,EAAWO,KAC7C,CAACP,EAAWO,iDCVa,SAI5BP,EACAC,EACAS,GAEA,MAAuBR,EAASD,GAChCX,EAAK,QAACE,UAAU,WACZ,IAAUmB,EAAGD,EAAQZ,QACrB,GAAKa,GAASA,EAAKP,iBAInB,OADAC,EAAM,QAACK,QAAQJ,GAAGK,EAAMX,EAAWO,qBAChBF,EAAA,QAACK,QAAQF,IAAIG,EAAMX,EAAWO,KAClD,CAACG,EAASV,EAAWO,6DCnBD,SAAIK,GAC3B,MAAiBtB,EAAK,QAACI,SAIvB,OAHAJ,EAAK,QAACE,UAAU,WACZqB,EAASf,QAAUc,GACpB,CAACA,IACWC,EAACf,qCCOe,SAACgB,YAAAA,IAAAA,EAAgB,KAChD,IAAgDxB,EAAAA,EAAK,QAACyB,SAAS,CAC3DC,MAAO,EACPC,OAAQ,IAFLC,EAAkBC,EAAAA,GAAAA,EAKzBC,EAAA,KAA+B,WAAA,OACRD,EAbhB,CACHH,OAF+Cb,EAAAA,QAA3CkB,WAGJJ,OAHuBK,EAAAA,cADH,IAC2BnB,GAe7CoB,EAAerB,EACjBsB,EAAQA,SAACC,EAAwBX,IASrC,OANAY,EAAuB,SAAUH,GAEjC3B,EAA0B,WACtB6B,KACD"}
|
package/dist/index.modern.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import
|
|
1
|
+
import e from"react";import t from"@wiggindev/events";import{throttle as n}from"@wiggindev/utils";const r="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function o(t){const n=e.useRef(u);r(()=>{n.current=t},[t]);const o=e.useRef(null);return o.current||(o.current=n.current),o.current}const u=()=>{throw new Error("INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")},c=(n,r,u)=>{const c=o(r);e.useEffect(()=>{const e=u.current;if(e&&e.addEventListener)return t.element.on(e,n,c),()=>t.element.off(e,n,c)},[u,n,c])},f=(n,r)=>{const u=o(r);e.useEffect(()=>{if(document&&document.addEventListener)return t.document.on(n,u),()=>t.document.off(n,u)},[n,u])},i=(n,r)=>{const u=o(r);e.useEffect(()=>{if(window&&window.addEventListener)return t.window.on(n,u),()=>t.window.off(n,u)},[n,u])},s=t=>{const n=e.useRef();return e.useEffect(()=>{n.current=t},[t]),n.current},d=(t=250)=>{const[u,c]=e.useState({width:0,height:0}),f=()=>c((()=>{const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}})()),s=o(n(f,t));return i("resize",s),r(()=>{f()},[]),u};export{f as useDocumentEventListener,o as useEvent,c as useEventListener,r as useIsomorphicLayoutEffect,s as usePrevious,d as useWindowDimensions,i as useWindowEventListener};
|
|
2
2
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
|
@@ -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","../src/usePrevious.ts","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport {
|
|
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","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { AnyFunction } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport function useEvent<C extends AnyFunction>(callback: C): C {\n const latestRef = React.useRef<C>(\n throwInvokedBeforeMountError as unknown as C\n );\n useIsomorphicLayoutEffect(() => {\n latestRef.current = callback;\n }, [callback]);\n\n const stableRef = React.useRef<C>(null as unknown as C);\n if (!stableRef.current) {\n stableRef.current = latestRef.current;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n return stableRef.current;\n}\n\nconst throwInvokedBeforeMountError = () => {\n throw new Error(\n 'INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.'\n );\n};\n","import React from 'react';\nimport events from '@wiggindev/events';\nimport type { EventName, EventListener } from '@wiggindev/events';\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/events';\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/events';\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","import React from 'react';\nimport { throttle } from '@wiggindev/utils';\nimport { useWindowEventListener } from './useWindowEventListener';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nimport { useEvent } from './useEvent';\n\nconst getWindowDimensions = () => {\n const { innerWidth: width, innerHeight: height } = window;\n return {\n width,\n height,\n };\n};\n\nexport const useWindowDimensions = (throttleLimit = 250) => {\n const [windowDimensions, setWindowDimensions] = React.useState({\n width: 0,\n height: 0,\n });\n\n const updateWindowDimensions = () =>\n setWindowDimensions(getWindowDimensions());\n const handleResize = useEvent(\n throttle(updateWindowDimensions, throttleLimit)\n );\n\n useWindowEventListener('resize', handleResize);\n\n useIsomorphicLayoutEffect(() => {\n updateWindowDimensions();\n }, []);\n\n return windowDimensions;\n};\n"],"names":["useIsomorphicLayoutEffect","React","useLayoutEffect","useEffect","useEvent","callback","latestRef","useRef","throwInvokedBeforeMountError","current","stableRef","eventName","listener","element","stableListener","node","addEventListener","events","on","off","document","window","value","stateRef","useWindowDimensions","throttleLimit","windowDimensions","setWindowDimensions","useState","width","height","updateWindowDimensions","innerWidth","innerHeight","getWindowDimensions","handleResize","throttle","useWindowEventListener"],"mappings":"kGAEaA,QACS,2BAAcC,EAAMC,gBAAkBD,EAAME,mBCC5DC,EAA0CC,GAC5C,MAAeC,EAAGL,EAAMM,OACpBC,GAEJR,EAA0B,KACtBM,EAAUG,QAAUJ,GACrB,CAACA,IAEJ,QAAkBJ,EAAMM,OAAU,MAMlC,OALKG,EAAUD,UACXC,EAAUD,QAAUH,EAAUG,WAIjBA,QAGrB,MAAMD,EAA+B,KACjC,MAAM,UACF,kHClBwB,CAI5BG,EACAC,EACAC,KAEA,MAAMC,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,MAAUY,EAAGF,EAAQJ,QACrB,GAAKM,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWG,GAC5B,IAAMG,EAAOJ,QAAQM,IAAIJ,EAAMJ,EAAWG,IAClD,CAACD,EAASF,EAAWG,OCjBY,CACpCH,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKiB,UAAaA,SAASJ,iBAI3B,OADAC,EAAOG,SAASF,GAAGP,EAAWG,GACvB,IAAMG,EAAOG,SAASD,IAAIR,EAAWG,IAC7C,CAACH,EAAWG,OCXmB,CAClCH,EACAC,KAEA,MAAME,EAAiBV,EAASQ,GAChCX,EAAME,UAAU,KACZ,GAAKkB,QAAWA,OAAOL,iBAIvB,OADAC,EAAOI,OAAOH,GAAGP,EAAWG,GACrB,IAAMG,EAAOI,OAAOF,IAAIR,EAAWG,IAC3C,CAACH,EAAWG,OCbYQ,IAC3B,MAAcC,EAAGtB,EAAMM,SAIvB,OAHAN,EAAME,UAAU,KACZoB,EAASd,QAAUa,GACpB,CAACA,IACWC,EAACd,SCOYe,EAAG,CAACC,EAAgB,OAChD,MAAOC,EAAkBC,GAAuB1B,EAAM2B,SAAS,CAC3DC,MAAO,EACPC,OAAQ,IAGgBC,EAAG,IAC3BJ,EAfoB,MACxB,MAAQK,WAAYH,EAAOI,YAAaH,GAAWT,OACnD,MAAO,CACHQ,QACAC,WAWoBI,IACNC,EAAG/B,EACjBgC,EAASL,EAAwBN,IASrC,OANAY,EAAuB,SAAUF,GAEjCnC,EAA0B,KACtB+B,KACD,IAEIL"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n from"react";import
|
|
1
|
+
import n from"react";import e from"@wiggindev/events";import{throttle as t}from"@wiggindev/utils";var r="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function u(e){var t=n.useRef(o);r(function(){t.current=e},[e]);var u=n.useRef(null);return u.current||(u.current=t.current),u.current}var o=function(){throw new Error("INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")},i=function(t,r,o){var i=u(r);n.useEffect(function(){var n=o.current;if(n&&n.addEventListener)return e.element.on(n,t,i),function(){return e.element.off(n,t,i)}},[o,t,i])},f=function(t,r){var o=u(r);n.useEffect(function(){if(document&&document.addEventListener)return e.document.on(t,o),function(){return e.document.off(t,o)}},[t,o])},c=function(t,r){var o=u(r);n.useEffect(function(){if(window&&window.addEventListener)return e.window.on(t,o),function(){return e.window.off(t,o)}},[t,o])},d=function(e){var t=n.useRef();return n.useEffect(function(){t.current=e},[e]),t.current},a=function(e){void 0===e&&(e=250);var o=n.useState({width:0,height:0}),i=o[0],f=o[1],d=function(){return f({width:(n=window).innerWidth,height:n.innerHeight});var n},a=u(t(d,e));return c("resize",a),r(function(){d()},[]),i};export{f as useDocumentEventListener,u as useEvent,i as useEventListener,r as useIsomorphicLayoutEffect,d as usePrevious,a as useWindowDimensions,c as useWindowEventListener};
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -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","../src/usePrevious.ts","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport {
|
|
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","../src/useWindowDimensions.ts"],"sourcesContent":["import React from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n","import React from 'react';\nimport { AnyFunction } from '@wiggindev/utils';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport function useEvent<C extends AnyFunction>(callback: C): C {\n const latestRef = React.useRef<C>(\n throwInvokedBeforeMountError as unknown as C\n );\n useIsomorphicLayoutEffect(() => {\n latestRef.current = callback;\n }, [callback]);\n\n const stableRef = React.useRef<C>(null as unknown as C);\n if (!stableRef.current) {\n stableRef.current = latestRef.current;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n return stableRef.current;\n}\n\nconst throwInvokedBeforeMountError = () => {\n throw new Error(\n 'INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.'\n );\n};\n","import React from 'react';\nimport events from '@wiggindev/events';\nimport type { EventName, EventListener } from '@wiggindev/events';\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/events';\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/events';\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","import React from 'react';\nimport { throttle } from '@wiggindev/utils';\nimport { useWindowEventListener } from './useWindowEventListener';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nimport { useEvent } from './useEvent';\n\nconst getWindowDimensions = () => {\n const { innerWidth: width, innerHeight: height } = window;\n return {\n width,\n height,\n };\n};\n\nexport const useWindowDimensions = (throttleLimit = 250) => {\n const [windowDimensions, setWindowDimensions] = React.useState({\n width: 0,\n height: 0,\n });\n\n const updateWindowDimensions = () =>\n setWindowDimensions(getWindowDimensions());\n const handleResize = useEvent(\n throttle(updateWindowDimensions, throttleLimit)\n );\n\n useWindowEventListener('resize', handleResize);\n\n useIsomorphicLayoutEffect(() => {\n updateWindowDimensions();\n }, []);\n\n return windowDimensions;\n};\n"],"names":["useIsomorphicLayoutEffect","React","useLayoutEffect","useEffect","callback","useRef","throwInvokedBeforeMountError","latestRef","current","stableRef","eventName","listener","element","useEvent","node","addEventListener","events","on","stableListener","off","document","window","value","stateRef","throttleLimit","useState","width","height","windowDimensions","setWindowDimensions","_React$useState","innerWidth","innerHeight","handleResize","throttle","updateWindowDimensions","useWindowEventListener"],"mappings":"kGAEaA,MACS,2BAAcC,EAAMC,gBAAkBD,EAAME,UCC5D,WAA0CC,GAC5C,MAAkBH,EAAMI,OACpBC,GAEJN,EAA0B,WACtBO,EAAUC,QAAUJ,GACrB,CAACA,IAEJ,IAAMK,EAAYR,EAAMI,OAAU,MAMlC,OALKI,EAAUD,UACXC,EAAUD,QAAUD,EAAUC,SAI3BC,EAAUD,QAGrB,IAAkCF,EAAG,WACjC,MAAM,UACF,kHClBwB,SAI5BI,EACAC,EACAC,GAEA,MAAuBC,EAASF,GAChCV,EAAME,UAAU,WACZ,IAAUW,EAAGF,EAAQJ,QACrB,GAAKM,GAASA,EAAKC,iBAInB,OADAC,EAAOJ,QAAQK,GAAGH,EAAMJ,EAAWQ,qBAChBF,EAACJ,QAAQO,IAAIL,EAAMJ,EAAWQ,KAClD,CAACN,EAASF,EAAWQ,OCjBY,SACpCR,EACAC,GAEA,MAAuBE,EAASF,GAChCV,EAAME,UAAU,WACZ,GAAKiB,UAAaA,SAASL,iBAI3B,OADAC,EAAOI,SAASH,GAAGP,EAAWQ,GACjBF,WAAAA,OAAAA,EAAOI,SAASD,IAAIT,EAAWQ,KAC7C,CAACR,EAAWQ,OCXmB,SAClCR,EACAC,GAEA,MAAuBE,EAASF,GAChCV,EAAME,UAAU,WACZ,GAAKkB,QAAWA,OAAON,iBAIvB,OADAC,EAAOK,OAAOJ,GAAGP,EAAWQ,GACfF,WAAAA,OAAAA,EAAOK,OAAOF,IAAIT,EAAWQ,KAC3C,CAACR,EAAWQ,OCbQ,SAAII,GAC3B,MAAiBrB,EAAMI,SAIvB,OAHAJ,EAAME,UAAU,WACZoB,EAASf,QAAUc,GACpB,CAACA,IACWC,EAACf,WCOe,SAACgB,YAAAA,IAAAA,EAAgB,KAChD,IAAgDvB,EAAAA,EAAMwB,SAAS,CAC3DC,MAAO,EACPC,OAAQ,IAFLC,EAAkBC,EAAAA,GAAAA,EAKzBC,EAAA,KAA+B,WAAA,OACRD,EAbhB,CACHH,OAF+CL,EAAAA,QAA3CU,WAGJJ,OAHuBK,EAAAA,cADH,IAC2BX,GAe7CY,EAAepB,EACjBqB,EAASC,EAAwBX,IASrC,OANAY,EAAuB,SAAUH,GAEjCjC,EAA0B,WACtBmC,KACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EventName, EventListener } from '@wiggindev/
|
|
1
|
+
import { EventName, EventListener } from '@wiggindev/events';
|
|
2
2
|
export declare const useDocumentEventListener: <K extends EventName<DocumentEventMap>>(eventName: K, listener: EventListener<DocumentEventMap, K>) => void;
|
package/dist/useEvent.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare
|
|
1
|
+
import { AnyFunction } from '@wiggindev/utils';
|
|
2
|
+
export declare function useEvent<C extends AnyFunction>(callback: C): C;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { EventName, EventListener } from '@wiggindev/
|
|
2
|
+
import type { EventName, EventListener } from '@wiggindev/events';
|
|
3
3
|
export declare const useEventListener: <K extends EventName<HTMLElementEventMap>, E extends HTMLElement>(eventName: K, listener: EventListener<HTMLElementEventMap, K>, element: React.RefObject<E>) => void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EventName, EventListener } from '@wiggindev/
|
|
1
|
+
import { EventName, EventListener } from '@wiggindev/events';
|
|
2
2
|
export declare const useWindowEventListener: <K extends EventName<WindowEventMap>>(eventName: K, listener: EventListener<WindowEventMap, K>) => void;
|
package/package.json
CHANGED
|
@@ -1,42 +1,51 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
2
|
+
"name": "@wiggindev/hooks",
|
|
3
|
+
"description": "Various hooks that I use in my projects",
|
|
4
|
+
"version": "0.2.9",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Andrew Wiggin",
|
|
7
|
+
"email": "andrew@wiggin.dev",
|
|
8
|
+
"url": "https://wiggin.dev"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/wiggindev/-wiggindev.git",
|
|
13
|
+
"directory": "packages/hooks"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"source": "src/index.ts",
|
|
21
|
+
"exports": {
|
|
22
|
+
"require": "./dist/index.cjs",
|
|
23
|
+
"default": "./dist/index.modern.js"
|
|
24
|
+
},
|
|
25
|
+
"main": "dist/index.cjs",
|
|
26
|
+
"module": "dist/index.module.js",
|
|
27
|
+
"unpkg": "dist/index.umd.js",
|
|
28
|
+
"types": "dist/index.d.ts",
|
|
29
|
+
"scripts": {
|
|
30
|
+
"clean": "rm -rf dist",
|
|
31
|
+
"build": "yarn clean && microbundle -f modern,esm,cjs",
|
|
32
|
+
"dev": "microbundle watch -f modern,esm,cjs",
|
|
33
|
+
"prepack": "yarn build"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@wiggindev/events": "*",
|
|
37
|
+
"@wiggindev/utils": "*"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"react": ">= 18"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@types/react": "^18.0.9",
|
|
44
|
+
"eslint-plugin-react": "^7.29.4",
|
|
45
|
+
"microbundle": "^0.15.0",
|
|
46
|
+
"react": "^18.1.0"
|
|
47
|
+
},
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"access": "public"
|
|
50
|
+
}
|
|
51
|
+
}
|
package/.eslintrc.cjs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
parserOptions: {
|
|
3
|
-
ecmaFeatures: {
|
|
4
|
-
jsx: true,
|
|
5
|
-
},
|
|
6
|
-
},
|
|
7
|
-
settings: {
|
|
8
|
-
react: {
|
|
9
|
-
version: 'detect',
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
plugins: ['react'],
|
|
13
|
-
extends: ['plugin:react/recommended'],
|
|
14
|
-
rules: {
|
|
15
|
-
'react/jsx-uses-react': 'error',
|
|
16
|
-
'react/jsx-uses-vars': 'error',
|
|
17
|
-
},
|
|
18
|
-
};
|
package/src/index.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export * from './useIsomorphicLayoutEffect';
|
|
2
|
-
export * from './useEvent';
|
|
3
|
-
export * from './useEventListener';
|
|
4
|
-
export * from './useDocumentEventListener';
|
|
5
|
-
export * from './useWindowEventListener';
|
|
6
|
-
export * from './usePrevious';
|
|
7
|
-
export * from './useWindowDimensions';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { events, EventName, EventListener } from '@wiggindev/utils';
|
|
3
|
-
import { useEvent } from './useEvent';
|
|
4
|
-
|
|
5
|
-
export const useDocumentEventListener = <K extends EventName<DocumentEventMap>>(
|
|
6
|
-
eventName: K,
|
|
7
|
-
listener: EventListener<DocumentEventMap, K>
|
|
8
|
-
) => {
|
|
9
|
-
const stableListener = useEvent(listener);
|
|
10
|
-
React.useEffect(() => {
|
|
11
|
-
if (!document || !document.addEventListener) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
events.document.on(eventName, stableListener);
|
|
15
|
-
return () => events.document.off(eventName, stableListener);
|
|
16
|
-
}, [eventName, stableListener]);
|
|
17
|
-
};
|
package/src/useEvent.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Callback } from '@wiggindev/utils';
|
|
3
|
-
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
4
|
-
|
|
5
|
-
export const useEvent = <C extends Callback>(callback: C): C => {
|
|
6
|
-
const callbackRef = React.useRef(callback);
|
|
7
|
-
useIsomorphicLayoutEffect(() => {
|
|
8
|
-
callbackRef.current = callback;
|
|
9
|
-
});
|
|
10
|
-
return React.useMemo(() => callbackRef.current, []);
|
|
11
|
-
};
|
package/src/useEventListener.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { events, EventName, EventListener } from '@wiggindev/utils';
|
|
3
|
-
import { useEvent } from './useEvent';
|
|
4
|
-
|
|
5
|
-
export const useEventListener = <
|
|
6
|
-
K extends EventName<HTMLElementEventMap>,
|
|
7
|
-
E extends HTMLElement
|
|
8
|
-
>(
|
|
9
|
-
eventName: K,
|
|
10
|
-
listener: EventListener<HTMLElementEventMap, K>,
|
|
11
|
-
element: React.RefObject<E>
|
|
12
|
-
) => {
|
|
13
|
-
const stableListener = useEvent(listener);
|
|
14
|
-
React.useEffect(() => {
|
|
15
|
-
const node = element.current;
|
|
16
|
-
if (!node || !node.addEventListener) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
events.element.on(node, eventName, stableListener);
|
|
20
|
-
return () => events.element.off(node, eventName, stableListener);
|
|
21
|
-
}, [element, eventName, stableListener]);
|
|
22
|
-
};
|
package/src/usePrevious.ts
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { events, EventName, EventListener } from '@wiggindev/utils';
|
|
3
|
-
import { useEvent } from './useEvent';
|
|
4
|
-
|
|
5
|
-
export const useWindowEventListener = <K extends EventName<WindowEventMap>>(
|
|
6
|
-
eventName: K,
|
|
7
|
-
listener: EventListener<WindowEventMap, K>
|
|
8
|
-
) => {
|
|
9
|
-
const stableListener = useEvent(listener);
|
|
10
|
-
React.useEffect(() => {
|
|
11
|
-
if (!window || !window.addEventListener) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
events.window.on(eventName, stableListener);
|
|
15
|
-
return () => events.window.off(eventName, stableListener);
|
|
16
|
-
}, [eventName, stableListener]);
|
|
17
|
-
};
|