spicyhooks
Version:
A collection of spicy React hooks
1 lines • 4.56 kB
Source Map (JSON)
{"version":3,"sources":["../src/hooks/useInViewElement.ts","../src/hooks/useScreenSize.ts","../src/hooks/useLocalStorage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type {\n InViewElement,\n InViewElementOptions,\n} from '../../lib/utils/common/common.interface';\n\nconst INITIAL_VALUE: InViewElement = {\n element: null,\n id: '',\n};\n\nconst useInViewElement = ({\n options = { threshold: 0.9 },\n baseOn = 'id',\n}: InViewElementOptions = {}): InViewElement => {\n const [inViewElement, setInViewElement] =\n useState<InViewElement>(INITIAL_VALUE);\n\n useEffect(() => {\n const observer = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n setInViewElement({\n element: entry.target,\n id: entry.target.id,\n });\n break; // Exit after the first intersecting entry -> just one element can be active at a time\n }\n }\n }, options);\n\n const elements = document.querySelectorAll<HTMLElement>(`[${baseOn}]`);\n\n if (elements.length > 0)\n elements.forEach((element) => observer.observe(element));\n\n return () => observer.disconnect();\n }, [options, baseOn]);\n\n return inViewElement;\n};\n\nexport { useInViewElement };\n","import { useEffect, useState } from 'react';\nimport type { ScreenSize } from '../../lib/utils/common/common.interface';\n\nconst INITIAL_VALUE: ScreenSize = {\n screenWidth: 0,\n screenHeight: 0,\n};\n\nconst useScreenSize = (): ScreenSize => {\n const [screenSize, setScreenSize] = useState<ScreenSize>(INITIAL_VALUE);\n\n useEffect(() => {\n const handleResize = () => {\n setScreenSize({\n screenWidth: window.innerWidth,\n screenHeight: window.innerHeight,\n });\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return screenSize;\n};\n\nexport { useScreenSize };\n","import { useEffect, useState } from 'react';\n\nconst useLocalStorage = <T>(key: string, initialValue: T | null) => {\n const [item, setItem] = useState<T | null>(null);\n\n const setValue = (value: T) => {\n localStorage.setItem(key, JSON.stringify(value));\n setItem(value);\n };\n\n useEffect(() => {\n const storedValue = localStorage.getItem(key);\n if (storedValue) setItem(JSON.parse(storedValue));\n else setValue(initialValue!);\n }, [key]);\n\n const removeItem = () => {\n const storedValue = localStorage.getItem(key);\n if (storedValue) {\n localStorage.removeItem(key);\n setItem(null);\n }\n };\n\n return [item, setValue, removeItem] as const;\n};\n\nexport { useLocalStorage };\n"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAMpC,IAAMC,EAA+B,CACnC,QAAS,KACT,GAAI,EACN,EAEMC,EAAmB,CAAC,CACxB,QAAAC,EAAU,CAAE,UAAW,EAAI,EAC3B,OAAAC,EAAS,IACX,EAA0B,CAAC,IAAqB,CAC9C,GAAM,CAACC,EAAeC,CAAgB,EACpCN,EAAwBC,CAAa,EAEvC,OAAAF,EAAU,IAAM,CACd,IAAMQ,EAAW,IAAI,qBAAsBC,GAAY,CACrD,QAAWC,KAASD,EAClB,GAAIC,EAAM,eAAgB,CACxBH,EAAiB,CACf,QAASG,EAAM,OACf,GAAIA,EAAM,OAAO,EACnB,CAAC,EACD,KACF,CAEJ,EAAGN,CAAO,EAEJO,EAAW,SAAS,iBAA8B,IAAIN,CAAM,GAAG,EAErE,OAAIM,EAAS,OAAS,GACpBA,EAAS,QAASC,GAAYJ,EAAS,QAAQI,CAAO,CAAC,EAElD,IAAMJ,EAAS,WAAW,CACnC,EAAG,CAACJ,EAASC,CAAM,CAAC,EAEbC,CACT,ECxCA,OAAS,aAAAO,EAAW,YAAAC,MAAgB,QAGpC,IAAMC,EAA4B,CAChC,YAAa,EACb,aAAc,CAChB,EAEMC,EAAgB,IAAkB,CACtC,GAAM,CAACC,EAAYC,CAAa,EAAIJ,EAAqBC,CAAa,EAEtE,OAAAF,EAAU,IAAM,CACd,IAAMM,EAAe,IAAM,CACzBD,EAAc,CACZ,YAAa,OAAO,WACpB,aAAc,OAAO,WACvB,CAAC,CACH,EAEA,OAAAC,EAAa,EAEb,OAAO,iBAAiB,SAAUA,CAAY,EAEvC,IAAM,OAAO,oBAAoB,SAAUA,CAAY,CAChE,EAAG,CAAC,CAAC,EAEEF,CACT,EC3BA,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAEpC,IAAMC,EAAkB,CAAIC,EAAaC,IAA2B,CAClE,GAAM,CAACC,EAAMC,CAAO,EAAIL,EAAmB,IAAI,EAEzCM,EAAYC,GAAa,CAC7B,aAAa,QAAQL,EAAK,KAAK,UAAUK,CAAK,CAAC,EAC/CF,EAAQE,CAAK,CACf,EAEA,OAAAR,EAAU,IAAM,CACd,IAAMS,EAAc,aAAa,QAAQN,CAAG,EACxCM,EAAaH,EAAQ,KAAK,MAAMG,CAAW,CAAC,EAC3CF,EAASH,CAAa,CAC7B,EAAG,CAACD,CAAG,CAAC,EAUD,CAACE,EAAME,EARK,IAAM,CACH,aAAa,QAAQJ,CAAG,IAE1C,aAAa,WAAWA,CAAG,EAC3BG,EAAQ,IAAI,EAEhB,CAEkC,CACpC","names":["useEffect","useState","INITIAL_VALUE","useInViewElement","options","baseOn","inViewElement","setInViewElement","observer","entries","entry","elements","element","useEffect","useState","INITIAL_VALUE","useScreenSize","screenSize","setScreenSize","handleResize","useEffect","useState","useLocalStorage","key","initialValue","item","setItem","setValue","value","storedValue"]}