Add use-unsaved

Author: exoRift

bun.lock

@@ -0,0 +1,3 @@
+import { config } from 'eslint-config'
+
+export default config()

eslint.config.mjs

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+import type { Router } from 'next/router'
+
+/**
+ * Don't let a user navigate or close the page if changes aren't saved
+ * @param unsaved    Are there unsaved changes?
+ * @param nextRouter If using NextJS, the next router (prevents NextJS navigation)
+ */
+export function useUnsaved (unsaved?: boolean, nextRouter?: Router): void {
+  useEffect(() => {
+    if (unsaved) {
+      /**
+       * If the tab is closed with unsaved changes
+       */
+      function preventUnsavedClose (e: Event): void {
+        e.preventDefault()
+      }
+
+      /**
+       * If a Next.JS SPA nav is started with unsaved changes
+       * @param          url The new URL (to check if simply changing page props rather than a page)
+       * @throws {Error}     To prevent page navigation
+       */
+      function preventUnsavedNav (url: string): void {
+        const urlSplit = url.split('?')[0]!.split('/')
+        if (nextRouter?.pathname.split('/').every((subroute, i) => (subroute.startsWith('[') && subroute.endsWith(']')) || subroute === urlSplit[i])) return
+
+        if (!confirm('Changes you made may not be saved.')) throw new Error('Navigation Canceled')
+      }
+
+      nextRouter?.events.on('routeChangeStart', preventUnsavedNav)
+      window.addEventListener('beforeunload', preventUnsavedClose)
+      return () => {
+        nextRouter?.events.off('routeChangeStart', preventUnsavedNav)
+        window.removeEventListener('beforeunload', preventUnsavedClose)
+      }
+    }
+  }, [unsaved])
+}

hooks/use-unsaved.ts

@@ -11,3 +11,7 @@ export {
 export {
   useDebouncedState
 } from './hooks/use-debounced-state'
+
+export {
+  useUnsaved
+} from './hooks/use-unsaved'

index.ts

@@ -1,14 +1,16 @@
 {
   "name": "react-exo-hooks",
   "module": "index.ts",
-  "type": "module",
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@types/next": "^9.0.0",
+    "eslint": "^9.30.1",
+    "eslint-config": "github:exoRift/eslint-config",
+    "eslint-plugin-jsdoc": "^51.3.4"
   },
   "peerDependencies": {
+    "react": "^19.1.0",
     "typescript": "^5"
   },
-  "dependencies": {
-    "react": "^19.1.0"
-  }
+  "type": "module"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",