feat: added hooks useScript, useDeepCompareEffect, useEventListener, useOnScreen, useWindowSize

Author: iojuedioe9rd

package-lock.json

@@ -1,30 +1,32 @@
 {
   "name": "cats-react-hooks",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/index.js",
-  "types": "./types",
+  "types": "dist/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/iojuedioe9rd/cats-react-hooks.git"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc src/index.ts --declaration --declarationDir ./types --outDir ./dist --target ES6 --allowSyntheticDefaultImports",
+    "build": "tsc src/index.ts --declaration --declarationDir dist --outDir ./dist --target ES6 --allowSyntheticDefaultImports",
     "commit": "git-cz"
   },
   "keywords": [],
   "author": "Cats Studio",
   "license": "MIT",
   "dependencies": {
-    "react": "^18.2.0",
-    "tsc": "^2.0.4",
-    "typescript": "^5.2.2"
+    "lodash": "^4.17.21",
+    "react": "^18.2.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.200",
     "@types/react": "^18.2.31",
     "cz-conventional-changelog": "^3.3.0",
-    "semantic-release": "^22.0.5"
+    "semantic-release": "^22.0.5",
+    "tsc": "^2.0.4",
+    "typescript": "^5.2.2"
   },
   "config": {
     "commitizen": {

package.json

@@ -5,12 +5,17 @@ import {useJSON as useJSONTMP} from "./useJSON"
 import { useToggle as useToggleTMP } from "./useToggle";
 import { useTimeout as useTimeoutTMP } from "./useTimeout";
 import { useDebounce as useDebounceTMP } from "./useDebounce";
-import React, { SetStateAction } from "react";
+import React, { EffectCallback, SetStateAction } from "react";
 import { useUpdateEffect as useUpdateEffectTMP } from "./useUpdateEffect";
 import { useArray as useArrayTMP, FilterCallback } from "./useArray";
 import {usePrevious as usePreviousTMP} from "./usePrevious"
 import {useStateWithHistory as useStateWithHistoryTMP} from "./useStateWithHistory"
 import useAsyncTMP from "./useAsync"
+import useScriptTMP from "./useScript";
+import useDeepCompareEffectTMP from "./useDeepCompareEffect"
+import useEventListenerTMP from "./useEventListener";
+import useOnScreenTMP from "./useOnScreen";
+import useWindowSizeTMP from "./useWindowSize"
 
 export function useLocalStorage<T>(key: string, initialValue: T | (() => T))
 {
@@ -93,4 +98,32 @@ export function useAsync<T>(callback: () => Promise<SetStateAction<T | undefined
 export function useFetch<T>(url: string | URL, options: RequestInit = {}, dependencies: React.DependencyList = [])
 {
     return useFetchTMP<T>(url.toString(), options, dependencies)
+}
+
+export function useScript(url: string | URL)
+{
+    return useScriptTMP(url.toString())
+}
+
+export function useDeepCompareEffect(callback: EffectCallback, dependencies?: React.DependencyList)
+{
+    return useDeepCompareEffectTMP(callback, dependencies)
+}
+
+export function useEventListener(
+    eventType: string,
+    callback: (e: Event) => (void | Promise<void>),
+    element = window
+)
+{
+    return useEventListenerTMP(eventType, callback, element)
+}
+export function useOnScreen(ref: React.MutableRefObject<HTMLElement>, rootMargin = "0px")
+{
+    return useOnScreenTMP(ref, rootMargin)
+}
+
+export function useWindowSize()
+{
+    return useWindowSizeTMP()
 }

src/index.ts

@@ -0,0 +1,14 @@
+import { EffectCallback, useEffect, useRef } from "react";
+import isEqual from "lodash/isEqual"
+
+export default function useDeepCompareEffect(callback: EffectCallback, dependencies?: React.DependencyList)
+{
+    const currentDependenciesRef = useRef<React.DependencyList | undefined>()
+
+    if(!isEqual(currentDependenciesRef.current, dependencies))
+    {
+        currentDependenciesRef.current = dependencies
+    }
+
+    useEffect(callback, [currentDependenciesRef.current])
+}

src/useDeepCompareEffect.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+
+
+export default function useEventListener(
+    eventType: string,
+    callback: (e: Event) => (void | Promise<void>),
+    element = window
+)
+{
+    const callbackRef = useRef(callback)
+
+    useEffect(() => {
+        callbackRef.current = callback
+    }, [callback])
+
+    useEffect(() => {
+        const handler = (e: Event) => callbackRef.current(e)
+        element.addEventListener(eventType, handler)
+
+        return () => element.removeEventListener(eventType, handler)
+    }, [eventType, element])
+}

src/useEventListener.ts

@@ -0,0 +1,24 @@
+import isNull from "lodash/isNull";
+import React, { useEffect, useState } from "react";
+
+export default function useOnScreen(ref: React.MutableRefObject<HTMLElement>, rootMargin = "0px")
+{
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        console.log(ref.current)
+        if(isNull( ref.current)) return
+        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), {rootMargin})
+        observer.observe(ref.current)
+
+        return () => {
+            if(ref.current == null) return
+            observer.unobserve(ref.current)
+        }
+        
+    }, [ref.current, rootMargin])
+
+    
+
+    return isVisible
+}

src/useOnScreen.ts

@@ -0,0 +1,16 @@
+import useAsync from "./useAsync";
+
+export default function useScript(url: string): { loading: boolean; error: Error | undefined; }
+{
+    return useAsync<undefined>(() => {
+        const script = document.createElement("script")
+        script.src = url
+        script.async = true
+
+        return new Promise<any>((resolve, reject) => {
+            script.addEventListener("load", resolve)
+            script.addEventListener("error", reject)
+            document.body.appendChild(script)
+        })
+    }, [url])
+}

src/useScript.ts

@@ -9,7 +9,7 @@ export function useSessionStorage<T>(key: string, initialValue: T | (() => T)) {
 }
 
 
-export function useStorage<T>(key: string, initialValue: T | (() => T), storageObject: Storage)
+export function useStorage<T>(key: string, initialValue: T | (() => T), storageObject: Storage): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => void] 
 {
   const [value, setValue] = useState<T| undefined>(() => {
     const jsonValue = storageObject.getItem(key)

src/useStorage.ts

@@ -0,0 +1,20 @@
+import { useState } from "react"
+import useEventListener from "./useEventListener"
+
+export type Size = {
+    width: number
+    height: number
+}
+
+export default function useWindowSize() {
+    const [windowSize, setWindowSize] = useState<Size>({
+        width: window.innerWidth,
+        height: window.innerHeight
+    })
+
+    useEventListener("resize",async (e: Event) => {
+        await setWindowSize({width: window.innerWidth, height: window.innerHeight})
+    })
+
+    return windowSize
+}