Adding ref scroll hook

Author: Alexandrebdry

.babelrc

@@ -6,5 +6,8 @@
         "targets": "> 0.25%, not dead"
       }
     ]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-react-jsx-compat"
   ]
-}
+}

README.md

@@ -7,21 +7,72 @@ npm install react-use-scroll-navigate
 ```
 
 ## Usage
+### useScrollNavigate
 ```jsx
 import useScrollNavigate from 'react-use-scroll-navigate';
 
 const App = () => {
-  
-  const navgiate = useScrollNavigate();
+
+    const { scrollNavigateError, scrollNavigate } = useScrollNavigate();
 
   return (
     <div>
-        <button onClick={ ()=> {navgiate('/') } )}>Go to homepage</button> 
+        <button onClick={ ()=> { 
+            scrollNavigate('/'); //It will navigate & scroll to the top ! 
+        }}>
+            Go to homepage!
+        </button> 
     </div>
   );
 };
 ```
 
+### NavigationRef
+```jsx
+
+//Main app 
+
+createRoot(document.getElementById("root")).render(
+    <StrictMode>
+        <BrowserRouter>
+            <NavigateContextProvider> {/*Ref navigation scroll navigation works with context*/}
+                <App /> {/*here is the rooter */}
+            </NavigateContextProvider>
+        </BrowserRouter>
+    </StrictMode>
+)
+
+```
+```jsx
+
+//On one page
+
+export default () => {
+    const { navigateToRef } = useNavigateContext();
+
+    return (
+        <Fragment>
+            <h1>About</h1>
+            <button onClick={() => navigateToRef("/")}>Home</button>
+        </Fragment>
+    )
+}
+```
+
+```jsx
+// On another page
+export default () => {
+    const { navigationRef } = useNavigateContext();
+
+    return (
+        <Fragment>
+            <h1>Home</h1>
+            <div ref={navigationRef} />
+        </Fragment>
+    )
+}
+```
+
 ## License
 [MIT](https://choosealicense.com/licenses/mit/)
 
@@ -32,4 +83,5 @@ For major changes, please open an issue first to discuss what you would like to
 
 
 ## Authors and acknowledgment
-- [Alexandre BAUDRY](https://github.com/Alexandrebdry)
+- [Alexandre BAUDRY](https://github.com/Alexandrebdry)
+- [Amin NAIRI](https://github.com/aminnairi)

package-lock.json

@@ -2,8 +2,8 @@
   "name": "react-use-scroll-navgiate",
   "version": "1.1.0",
   "description": "A react hook to scroll to the top of the page when navigate to another one",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "main": "cjs/index.jsx",
+  "module": "esm/index.jsx",
   "scripts": {
     "build": "rollup -c",
     "release": "standard-version",
@@ -32,15 +32,16 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-react-jsx-compat": "^7.18.6",
     "@babel/preset-env": "^7.19.3",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.2",
+    "@rollup/plugin-replace": "^3.1.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.4.2",
     "react-test-renderer": "^18.2.0",
     "rollup": "^2.79.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.2",
-    "@rollup/plugin-replace": "^3.1.0",
-    "standard-version": "^9.5.0",
+    "standard-version": "^9.5.0"
   },
   "peerDependencies": {
     "react-router-dom": "^6.4.2"

package.json

@@ -4,10 +4,10 @@ import commonjs from "@rollup/plugin-commonjs";
 
 
 export default {
-    input: './src/index.js',
+    input: './src/index.jsx',
     output: [
         {
-            file: 'cjs/index.js',
+            file: 'cjs/index.jsx',
             format: 'cjs',
             name:"useScrollNavigate",
             globals: {

rollup.config.js

@@ -0,0 +1,105 @@
+import {useNavigate} from "react-router-dom";
+import {createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState} from "react";
+
+
+export class ScrollNavigatePathError extends Error {
+    constructor(...params) {
+        super(params);
+        this.name = "ScrollNavigatePathError" ;
+    }
+}
+export class ScrollNavigateLeftError extends Error {
+    constructor(...parameters) {
+        super(parameters)
+        this.name = "ScrollNavigateLeftError"
+    }
+}
+
+export class ScrollNavigateTopError extends Error {
+    constructor(...parameters) {
+        super(parameters)
+        this.name = "ScrollNavigateTopError"
+    }
+}
+
+/**
+ *
+ *  React hook to redirect to a new page and scroll to somewhere on the page
+ *  It scrolls to the top by default
+ *
+ * @param {number} top - The y position to scroll to from top - default = 0 - must be between 0 and 100
+ * @param {number} left - The x position to scroll to from left - default = 0 - must be between 0 and 100
+ * @param {string} path - The path to navigate to - default = /
+ */
+export function useScrollNavigate(path = "/", top = 0 , left = 0  ) {
+
+    const navigate = useNavigate();
+    const [scrollNavigateError, setScrollNavigateError] = useState() ;
+    const scrollNavigate = useCallback( (path, top, left) => {
+       if (typeof path != "string") {
+           setScrollNavigateError(new ScrollNavigatePathError("Path is not a string")) ;
+           return
+       }
+       if (typeof top !== "number") {
+           setScrollNavigateError(new ScrollNavigateTopError("Top is not a number"))
+           return
+       }
+       if (top > 100 || top < 0) {
+           setScrollNavigateError(new ScrollNavigateLeftError("Top isn't between 0 and 100"))
+       }
+       if(typeof left !== "number") {
+           setScrollNavigateError(new ScrollNavigateTopError("Left is not a number"))
+           return
+       }
+        if (left > 100 || left < 0) {
+            setScrollNavigateError(new ScrollNavigateLeftError("Left isn't between 0 and 100"))
+        }
+        setScrollNavigateError(false);
+        navigate(path);
+
+        window.scroll({left,top,behavior: 'smooth'}) ;
+
+    },[navigate, setScrollNavigateError]);
+
+    return {
+        scrollNavigate,
+        scrollNavigateError
+    }
+}
+
+/** Scroll to a html ref */
+export const NavigateContext = createContext();
+export const NavigateContextProvider = ({children}) => {
+    const navigate = useNavigate();
+    const [navigationBeacon, setNavigationBeacon] = useState(false) ;
+    const navigationRef = useRef() ;
+
+    const navigateToRef = useCallback((path) => {
+        navigate(path) ;
+        setNavigationBeacon(Symbol());
+
+    },[navigate, setNavigationBeacon]);
+
+    const value = useMemo(() => {navigationRef, navigateToRef},
+        [navigationRef,navigateToRef()]);
+
+    useLayoutEffect(() => {
+       if (navigationBeacon === false )return
+       if(navigationRef.current instanceof HTMLElement) {
+           const {left,top} = navigationRef.current.getBoundingClientRect();
+           window.scroll({left,top,behavior:'smooth'});
+       }
+       setNavigationBeacon(false) ;
+    },[navigationBeacon,navigationRef,setNavigationBeacon]);
+
+    return (
+        <NavigateContext.Provider value={value}>
+            {children}
+        </NavigateContext.Provider>
+    )
+}
+
+export const useNavigationContext = () => useContext(NavigateContext) ;
+
+
+