@aminnairi/react-router 1.1.0 → 2.0.1

package/.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'index.js'],
+  parser: '@typescript-eslint/parser',
+  plugins: [],
+  rules: {},
+}

package/README.md

@@ -17,6 +17,7 @@ cd project
 ```
 
 ### Dependencies installation
+
 ```bash
 npm install
 ```
@@ -41,10 +42,8 @@ import { createPage } from "@aminnairi/react-router";
 export const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home page</h1>
-    );
-  }
+    return <h1>Home page</h1>;
+  },
 });
 ```
 
@@ -59,12 +58,8 @@ import { home } from "./pages/home";
 export const Fallback = () => {
   const navigateToHomePage = useNavigateToPage(home);
 
-  return (
-    <button onClick={navigateToHomePage}>
-      Go back home
-    </button>
-  );
-}
+  return <button onClick={() => navigateToHomePage({})}>Go back home</button>;
+};
 ```
 
 ```bash
@@ -82,30 +77,26 @@ export const Issue = () => {
   return (
     <Fragment>
       <h1>An issue occurred</h1>
-      <button onClick={home.navigate}>
-        Go back home
-      </button>
+      <button onClick={() => navigateToHomePage({})}>Go back home</button>
     </Fragment>
   );
-}
+};
 ```
 
 ```bash
 touch src/router/index.ts
 ```
 
-```tsx
+```ts
 import { createRouter } from "@aminnairi/react-router";
-import { Fallback } from "./router/fallback";
-import { Issue } from "./router/issue";
-import { home } from "./router/pages/home";
+import { Fallback } from "./fallback";
+import { Issue } from "./issue";
+import { home } from "./pages/home";
 
 export const router = createRouter({
   fallback: Fallback,
   issue: Issue,
-  pages: [
-    home
-  ]
+  pages: [home],
 });
 ```
 
@@ -117,9 +108,7 @@ touch src/App.tsx
 import { router } from "./router";
 
 export default function App() {
-  return (
-    <router.View />
-  );
+  return <router.View />;
 }
 ```
 
@@ -144,7 +133,7 @@ createRoot(rootElement).render(
     <router.Provider>
       <App />
     </router.Provider>
-  </StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -166,10 +155,8 @@ import { createPage } from "@aminnairi/react-router";
 createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 ```
 
@@ -181,24 +168,14 @@ import { createPage, createRouter } from "@aminnairi/react-router";
 const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 createRouter({
-  fallback: () => (
-    <h1>
-      Not found
-    </h1>
-  ),
-  issue: () => (
-    <h1>
-      An error occurred
-    </h1>
-  ),
-  pages: [home]
+  fallback: () => <h1>Not found</h1>,
+  issue: () => <h1>An error occurred</h1>,
+  pages: [home],
 });
 ```
 
@@ -209,11 +186,9 @@ import { createPage } from "@aminnairi/react-router";
 
 createPage({
   path: "/users/:user",
-  element: function User({ parameters: { user }}) {
-    return (
-      <h1>User#{user}</h1>
-    );
-  }
+  element: function User({ parameters: { user } }) {
+    return <h1>User#{user}</h1>;
+  },
 });
 ```
 
@@ -224,11 +199,13 @@ import { createPage } from "@aminnairi/react-router";
 
 createPage({
   path: "/users/:user/articles/:article",
-  element: function UserArticle({ parameters: { user, article }}) {
+  element: function UserArticle({ parameters: { user, article } }) {
     return (
-      <h1>Article#{article } of user#{user}</h1>
+      <h1>
+        Article#{article} of user#{user}
+      </h1>
     );
-  }
+  },
 });
 ```
 
@@ -243,10 +220,8 @@ import { createPage, useNavigateToPage } from "@aminnairi/react-router";
 const login = createPage({
   path: "/login",
   element: function Login() {
-    return (
-      <h1>Login</h1>
-    );
-  }
+    return <h1>Login</h1>;
+  },
 });
 
 const about = createPage({
@@ -256,15 +231,11 @@ const about = createPage({
 
     return (
       <Fragment>
-        <h1>
-          About Us
-        </h1>
-        <button onClick={navigateToLoginPage}>
-          Login
-        </button>
+        <h1>About Us</h1>
+        <button onClick={() => navigateToLoginPage({})}>Login</button>
       </Fragment>
     );
-  }
+  },
 });
 
 createPage({
@@ -274,15 +245,11 @@ createPage({
 
     return (
       <Fragment>
-        <h1>
-          Home
-        </h1>
-        <button onClick={navigateToAboutPage}>
-          About Us
-        </button>
+        <h1>Home</h1>
+        <button onClick={() => navigateToAboutPage({})}>About Us</button>
       </Fragment>
     );
-  }
+  },
 });
 ```
 
@@ -294,11 +261,9 @@ import { createPage, useNavigateToPage } from "@aminnairi/react-router";
 
 const user = createPage({
   path: "/users/:user",
-  element: function User({ parameters: { user }}) {
-    return (
-      <h1>User#{user}</h1>
-    );
-  }
+  element: function User({ parameters: { user } }) {
+    return <h1>User#{user}</h1>;
+  },
 });
 
 createPage({
@@ -308,15 +273,13 @@ createPage({
 
     return (
       <Fragment>
-        <h1>
-          Home
-        </h1>
+        <h1>Home</h1>
         <button onClick={() => navigateToUserPage({ user: "123" })}>
           User#123
         </button>
       </Fragment>
     );
-  }
+  },
 });
 ```
 
@@ -332,22 +295,14 @@ import { createRouter, createPage } from "@aminnairi/react-router";
 const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 const router = createRouter({
-  fallback: () => (
-    <h1>Not found</h1>
-  ),
-  issue: () => (
-    <h1>An error occurred</h1>
-  ),
-  pages: [
-    home
-  ]
+  fallback: () => <h1>Not found</h1>,
+  issue: () => <h1>An error occurred</h1>,
+  pages: [home],
 });
 
 const rootElement = document.getElementById("root");
@@ -367,51 +322,47 @@ const App = () => {
       <main>
         <router.View />
       </main>
-      <footer>
-        Credit © Yourself 2025
-      </footer>
+      <footer>Credit © Yourself 2025</footer>
     </Fragment>
   );
-}
+};
 
 root.render(
   <StrictMode>
     <router.Provider>
       <App />
     </router.Provider>
-  </StrictMode>
+  </StrictMode>,
 );
 ```
 
 You can also activate the View Transition Web API if you want before each page renders. This is nice because by default, the browser already has some styling that allows for a smooth and simple transition between pages.
 
-All you have to do is to set the `withViewTransition` property to `true` in the arguments of the `createRouter` function. By default, its value is set to `false` if not provided in the arguments of the `createRouter` function.
+All you have to do is to provide a `transition` function in the arguments of the `createRouter` function. This function receives the navigation direction (`"pushstate"` or `"popstate"`) and a `next` callback to render the next page.
+
+This library also exports a `slideFadeTransition` that you can use out-of-the-box.
 
 ```tsx
 import { Fragment, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { createRouter, createPage } from "@aminnairi/react-router";
+import {
+  createRouter,
+  createPage,
+  slideFadeTransition,
+} from "@aminnairi/react-router";
 
 const home = createPage({
   path: "/",
   element: function Page() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 const router = createRouter({
-  transition: true,
-  fallback: () => (
-    <h1>Not found</h1>
-  ),
-  issue: () => (
-    <h1>An error occurred</h1>
-  ),
-  pages: [
-    home
-  ]
+  transition: slideFadeTransition,
+  fallback: () => <h1>Not found</h1>,
+  issue: () => <h1>An error occurred</h1>,
+  pages: [home],
 });
 
 const rootElement = document.getElementById("root");
@@ -431,19 +382,17 @@ const App = () => {
       <main>
         <router.View />
       </main>
-      <footer>
-        Credit © Yourself 2025
-      </footer>
+      <footer>Credit © Yourself 2025</footer>
     </Fragment>
   );
-}
+};
 
 root.render(
   <StrictMode>
     <router.Provider>
       <App />
     </router.Provider>
-  </StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -457,29 +406,20 @@ import { createRouter, createPage } from "@aminnairi/react-router";
 const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 const router = createRouter({
-  transition: true,
-  fallback: () => (
-    <h1>Not found</h1>
-  ),
+  fallback: () => <h1>Not found</h1>,
   issue: ({ error, reset }) => (
-    return (
-      <Fragment>
-        <h1>Error</h1>
-        <p>{error.message}</p>
-        <button onClick={reset}>Reset</button>
-      </Fragment>
-    );
+    <Fragment>
+      <h1>Error</h1>
+      <p>{error.message}</p>
+      <button onClick={reset}>Reset</button>
+    </Fragment>
   ),
-  pages: [
-    home
-  ]
+  pages: [home],
 });
 
 const rootElement = document.getElementById("root");
@@ -499,19 +439,17 @@ const App = () => {
       <main>
         <router.View />
       </main>
-      <footer>
-        Credit © Yourself 2025
-      </footer>
+      <footer>Credit © Yourself 2025</footer>
     </Fragment>
   );
-}
+};
 
 root.render(
   <StrictMode>
     <router.Provider>
       <App />
     </router.Provider>
-  </StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -525,35 +463,26 @@ import { createRouter, createPage, createIssue } from "@aminnairi/react-router";
 const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 const Fallback = () => {
-  return (
-    <h1>Not found</h1>
-  );
-}
+  return <h1>Not found</h1>;
+};
 
 const Issue = createIssue(({ error, reset }) => (
-  return (
-    <Fragment>
-      <h1>Error</h1>
-      <p>{error.message}</p>
-      <button onClick={reset}>Reset</button>
-    </Fragment>
-  );
+  <Fragment>
+    <h1>Error</h1>
+    <p>{error.message}</p>
+    <button onClick={reset}>Reset</button>
+  </Fragment>
 ));
 
 const router = createRouter({
-  transition: true,
   fallback: Fallback,
   issue: Issue,
-  pages: [
-    home
-  ]
+  pages: [home],
 });
 
 const rootElement = document.getElementById("root");
@@ -573,17 +502,17 @@ const App = () => {
       <main>
         <router.View />
       </main>
-      <footer>
-        Credit © Yourself 2025
-      </footer>
+      <footer>Credit © Yourself 2025</footer>
     </Fragment>
   );
-}
+};
 
 root.render(
   <StrictMode>
-    <App />
-  </StrictMode>
+    <router.Provider>
+      <App />
+    </router.Provider>
+  </StrictMode>,
 );
 ```
 
@@ -594,15 +523,18 @@ You don't have to manually append this prefix when creating pages, its automatic
 ```tsx
 import { Fragment, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { createRouter, createPage, createIssue, useNavigateToPage } from "@aminnairi/react-router";
+import {
+  createRouter,
+  createPage,
+  createIssue,
+  useNavigateToPage,
+} from "@aminnairi/react-router";
 
 const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 const Fallback = () => {
@@ -611,31 +543,24 @@ const Fallback = () => {
   return (
     <Fragment>
       <h1>Not found</h1>
-      <button onClick={navigateToHomePage}>
-        Go Back Home
-      </button>
+      <button onClick={() => navigateToHomePage({})}>Go Back Home</button>
     </Fragment>
   );
-}
+};
 
 const Issue = createIssue(({ error, reset }) => (
-  return (
-    <Fragment>
-      <h1>Error</h1>
-      <p>{error.message}</p>
-      <button onClick={reset}>Reset</button>
-    </Fragment>
-  );
+  <Fragment>
+    <h1>Error</h1>
+    <p>{error.message}</p>
+    <button onClick={reset}>Reset</button>
+  </Fragment>
 ));
 
 const router = createRouter({
   prefix: "/portfolio",
-  transition: true,
   fallback: Fallback,
   issue: Issue,
-  pages: [
-    home
-  ]
+  pages: [home],
 });
 
 const rootElement = document.getElementById("root");
@@ -655,17 +580,17 @@ const App = () => {
       <main>
         <router.View />
       </main>
-      <footer>
-        Credit © Yourself 2025
-      </footer>
+      <footer>Credit © Yourself 2025</footer>
     </Fragment>
   );
-}
+};
 
 root.render(
   <StrictMode>
-    <App />
-  </StrictMode>
+    <router.Provider>
+      <App />
+    </router.Provider>
+  </StrictMode>,
 );
 ```
 
@@ -679,13 +604,11 @@ It accepts a page that has been created using `createPage`.
 import { Fragment } from "react";
 import { createPage, useNavigateToPage } from "@aminnairi/react-router";
 
-const home = createPath({
+const home = createPage({
   path: "/",
   element: function Home() {
-    return (
-      <h1>Home</h1>
-    );
-  }
+    return <h1>Home</h1>;
+  },
 });
 
 createPage({
@@ -696,10 +619,10 @@ createPage({
     return (
       <Fragment>
         <h1>About</h1>
-        <button onClick={navigateToHomePage}>Home</button>
+        <button onClick={() => navigateToHomePage({})}>Home</button>
       </Fragment>
     );
-  }
+  },
 });
 ```
 
@@ -711,13 +634,11 @@ The parameters should always be provided as string, as they are the only data ty
 import { Fragment } from "react";
 import { createPage, useNavigateToPage } from "@aminnairi/react-router";
 
-const user = createPath({
+const user = createPage({
   path: "/users/:user",
-  element: function User({ parameters: { user }}) {
-    return (
-      <h1>User#{user}</h1>
-    );
-  }
+  element: function User({ parameters: { user } }) {
+    return <h1>User#{user}</h1>;
+  },
 });
 
 createPage({
@@ -728,10 +649,12 @@ createPage({
     return (
       <Fragment>
         <h1>About</h1>
-        <button onClick={() => navigateToUserPage({ user: "123" })}>Home</button>
+        <button onClick={() => navigateToUserPage({ user: "123" })}>
+          Home
+        </button>
       </Fragment>
     );
-  }
+  },
 });
 ```
 
@@ -745,13 +668,11 @@ The created component is simply a `<a href="...">{children}</a>` under the hood
 import { Fragment } from "react";
 import { createPage, useLink } from "@aminnairi/react-router";
 
-const user = createPath({
+const user = createPage({
   path: "/users/:user",
-  element: function User({ parameters: { user }}) {
-    return (
-      <h1>User#{user}</h1>
-    );
-  }
+  element: function User({ parameters: { user } }) {
+    return <h1>User#{user}</h1>;
+  },
 });
 
 createPage({
@@ -765,7 +686,7 @@ createPage({
         <Link parameters={{ user: "123" }}>User#123</Link>
       </Fragment>
     );
-  }
+  },
 });
 ```
 
@@ -782,7 +703,7 @@ import { createPage, useSearch } from "@aminnairi/react-router";
 createPage({
   path: "/users",
   element: function Home() {
-    const [search] = useSearch();
+    const search = useSearch();
     const sortedByDate = useMemo(() => search.get("sort-by") === "date", [search]);
 
     return (
@@ -807,10 +728,8 @@ createPage({
   element: function OauthCallback() {
     const token = useHash();
 
-    return (
-      <h1>You token is {token}</h1>
-    );
-  }
+    return <h1>You token is {token}</h1>;
+  },
 });
 ```
 
@@ -825,13 +744,13 @@ This function is mainly used in the internals of the `createRouter` and in most
 ```typescript
 import { doesRouteMatchPath } from "@aminnairi/react-router";
 
-doesRoutePatchPath("/", "/"); // true
+doesRouteMatchPath("/", "/"); // true
 
-doesRoutePatchPath("/", "/about"); // false
+doesRouteMatchPath("/", "/about"); // false
 
-doesRoutePatchPath("/users/:user", "/users/123"); // true
+doesRouteMatchPath("/users/:user", "/users/123"); // true
 
-doesRoutePatchPath("/users/:user", "/users/123/articles"); // false
+doesRouteMatchPath("/users/:user", "/users/123/articles"); // false
 ```
 
 You can also optionally provide a prefix.
@@ -839,13 +758,13 @@ You can also optionally provide a prefix.
 ```typescript
 import { doesRouteMatchPath } from "@aminnairi/react-router";
 
-doesRoutePatchPath("/", "/github", "/github"); // true
+doesRouteMatchPath("/", "/github", "/github"); // true
 
-doesRoutePatchPath("/", "/github/about", "/github"); // false
+doesRouteMatchPath("/", "/github/about", "/github"); // false
 
-doesRoutePatchPath("/users/:user", "/github/users/123", "/github"); // true
+doesRouteMatchPath("/users/:user", "/github/users/123", "/github"); // true
 
-doesRoutePatchPath("/users/:user", "/github/users/123/articles", "/github"); // false
+doesRouteMatchPath("/users/:user", "/github/users/123/articles", "/github"); // false
 ```
 
 ### getParameters
@@ -857,13 +776,13 @@ This function is mainly used in the internals of the `createRouter` and in most
 ```typescript
 import { getParameters } from "@aminnairi/react-router";
 
-getParameters("/", "/"); // object
+getParameters("/", "/"); // {}
 
-getParameters("/", "/about"); // object
+getParameters("/", "/about"); // {}
 
 getParameters("/users/:user", "/users/123"); // { user: "123" }
 
-getParameters("/users/:user", "/users/123/articles"); // { user: "123" }
+getParameters("/users/:user", "/users/123/articles"); // {}
 ```
 
 You can also provide an optional prefix.
@@ -871,91 +790,13 @@ You can also provide an optional prefix.
 ```typescript
 import { getParameters } from "@aminnairi/react-router";
 
-getParameters("/", "/github", "/github"); // object
+getParameters("/", "/github", "/github"); // {}
 
-getParameters("/", "/github/about", "/github"); // object
+getParameters("/", "/github/about", "/github"); // {}
 
 getParameters("/users/:user", "/github/users/123", "/github"); // { user: "123" }
 
-getParameters("/users/:user", "/github/users/123/articles", "/github"); // { user: "123" }
-```
-
-### findPage
-
-Return a page that matches the `window.location.pathname` property containing the current URI of the page from an array of pages.
-
-If it does not match any pages, it returns `undefined` instead.
-
-This function is mainly used in the internals of the `createRouter` and in most case should not be necessary.
-
-```tsx
-import { findPage, createPage } from "@aminnairi/react-router";
-
-const home = createPage({
-  path: "/",
-  element: () => <h1>Home</h1>
-});
-
-const about = createPage({
-  path: "/about",
-  element: () => <h1>About</h1>
-});
-
-const login = createPage({
-  path: "/login",
-  element: () => <h1>Login</h1>
-});
-
-const pages = [
-  home.page,
-  about.page,
-  login.page
-];
-
-const foundPage = findPage(pages, "/login");
-
-if (foundPage) {
-  console.log("Found a page matching the current location");
-  console.log(foundPage.path);
-} else {
-  console.log("No page matching the current location.");
-}
-```
-
-You can also provide an optional prefix.
-
-```tsx
-import { findPage, createPage } from "@aminnairi/react-router";
-
-const home = createPage({
-  path: "/",
-  element: () => <h1>Home</h1>
-});
-
-const about = createPage({
-  path: "/about",
-  element: () => <h1>About</h1>
-});
-
-const login = createPage({
-  path: "/login",
-  element: () => <h1>Login</h1>
-});
-
-const pages = [
-  home.page,
-  about.page,
-  login.page
-];
-
-const foundPage = findPage(pages, "/github/login", "/github");
-
-if (foundPage) {
-  console.log("Found a page matching the current location");
-  console.log(foundPage.path);
-} else {
-  console.log("No page matching the current location.");
-}
+getParameters("/users/:user", "/github/users/123/articles", "/github"); // {}
 ```
 
 ### sanitizePath
@@ -994,9 +835,7 @@ This means that you can use this library with other popular solutions for handli
 
 ### Transition
 
-Support for the View Transition API is built-in and allows for painless and smooth view transition out-of-the-box without having to do anything.
-
-This can also easily be disabled if needed.
+Support for the View Transition API is built-in and allows for painless and smooth view transition out-of-the-box. You can create your own transition animation, and the library also exports a `slideFadeTransition` ready to be used.
 
 ### Error handling
 
@@ -1010,12 +849,43 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`2.0.1`](#201)
+- [`2.0.0`](#200)
 - [`1.1.0`](#110)
 - [`1.0.1`](#101)
 - [`1.0.0`](#100)
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 2.0.1
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+- Now running a linter with eslint and TypeScript and a stricter configuration to prevent type errors
+
+#### Bug & security fixes
+
+- Fixed an error while the error boundary was not using an override when using a stricter typescript configuration
+
+### 2.0.0
+
+#### Major changes
+
+- The `transition` property in `createRouter` is now a function instead of a boolean, which allows for more control over the animation. This is a breaking change.
+- A `slideFadeTransition` is now exported and can be used directly.
+
+#### Minor changes
+
+None.
+
+#### Bug & security fixes
+
+None.
+
 ### 1.1.0
 
 #### Major changes
@@ -1088,4 +958,4 @@ None.
 
 #### Bug & security fixes
 
-None.
+None.

package/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback, memo, MouseEvent } from "react";
 
 export type AbsolutePath<Path extends string> =
@@ -25,8 +26,10 @@ export interface Page<Path extends string> {
   element: FunctionComponent<PageComponentProps<Path>>
 }
 
+export type Transition = (direction: NavigationDirection, next: () => void) => void;
+
 export interface CreateRouterOptions<Path extends string> {
-  transition?: boolean,
+  transition?: Transition,
   prefix?: string,
   pages: Array<Page<Path>>
   fallback: FunctionComponent
@@ -99,7 +102,7 @@ export interface IssueProps {
 
 export interface ErrorBoundaryProps {
   fallback: FunctionComponent<IssueProps>,
-  transition: boolean
+  transition?: Transition
 }
 
 export interface ErrorBoundaryState {
@@ -113,13 +116,13 @@ export class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProp
     this.state = { error: null };
   }
 
-  static getDerivedStateFromError(error: unknown) {
+  public static getDerivedStateFromError(error: unknown) {
     const normalizedError = error instanceof Error ? error : new Error(String(error));
 
     return { error: normalizedError };
   }
 
-  render() {
+  public override render() {
     const viewTransitionSupported = typeof document.startViewTransition === "function";
 
     if (this.state.error) {
@@ -177,6 +180,11 @@ const Context = createContext<ContextInterface>({
   setHash: () => { }
 });
 
+enum NavigationDirection {
+  Forward = "pushstate",
+  Backward = "popstate"
+}
+
 export const useNavigateToPage = <Path extends string>(page: Page<Path>) => {
   const { prefix } = useContext(Context);
 
@@ -193,10 +201,16 @@ export const useNavigateToPage = <Path extends string>(page: Page<Path>) => {
       window.history.pushState(null, pathWithParameters, pathWithParameters);
     }
 
-    window.dispatchEvent(new CustomEvent("popstate"));
-  }, [page]);
+    window.dispatchEvent(new CustomEvent(NavigationDirection.Forward));
+  }, [page, prefix]);
 };
 
+export const useNavigateBack = () => {
+  return useCallback(() => {
+    window.dispatchEvent(new CustomEvent(NavigationDirection.Backward));
+  }, []);
+}
+
 export const useIsActivePage = (page: Page<string>) => {
   const { pathname, prefix } = useContext(Context);
 
@@ -223,12 +237,12 @@ export const useLink = <Path extends string>(page: Page<Path>) => {
       return Object.entries(parameters).reduce((previousPath, [parameterName, parameterValue]) => {
         return previousPath.replace(`:${parameterName}`, parameterValue);
       }, sanitizePath(`${prefix ?? ""}/${page.path}`));
-    }, []);
+    }, [prefix, page, parameters]);
 
     const navigate = useCallback((event: MouseEvent) => {
       event.preventDefault();
       navigateToPage(parameters);
-    }, []);
+    }, [navigateToPage, parameters]);
 
     return (
       <a
@@ -243,12 +257,45 @@ export const useLink = <Path extends string>(page: Page<Path>) => {
   return Link;
 };
 
-export const createRouter = <Path extends string>({ pages, fallback, transition: withViewTransition, issue, prefix }: CreateRouterOptions<Path>) => {
+export const slideFadeTransition: Transition = async (direction: NavigationDirection, next) => {
+  const transition = document.startViewTransition(() => {
+    next();
+  });
+
+  await transition.ready;
+
+  document.documentElement.animate(
+    [
+      { transform: 'translateX(0)', opacity: 1 },
+      { transform: `translateX(${direction === NavigationDirection.Forward ? '100%' : '-100%'})`, opacity: 0 }
+    ],
+    {
+      duration: 250,
+      easing: "ease-in-out",
+      fill: "both",
+      pseudoElement: "::view-transition-old(root)",
+    }
+  );
+
+  document.documentElement.animate(
+    [
+      { transform: `translateX(${direction === NavigationDirection.Forward ? '-100%' : '100%'})`, opacity: 0 },
+      { transform: 'translateX(0)', opacity: 1 }
+    ],
+    {
+      duration: 250,
+      easing: "ease-in-out",
+      fill: "both",
+      pseudoElement: "::view-transition-new(root)",
+    }
+  );
+}
+
+export const createRouter = <Path extends string>({ pages, fallback, transition, issue, prefix }: CreateRouterOptions<Path>) => {
   const Provider = ({ children }: ProviderProps) => {
     const [pathname, setPathname] = useState(sanitizePath(window.location.pathname));
     const [search, setSearch] = useState(new URLSearchParams(sanitizePath(window.location.search)));
     const [hash, setHash] = useState(window.location.hash);
-    const shouldTransitionBetweenPages = useMemo(() => typeof document.startViewTransition === "function" && withViewTransition ? true : false, [withViewTransition]);
 
     const value = useMemo(() => {
       return {
@@ -263,9 +310,9 @@ export const createRouter = <Path extends string>({ pages, fallback, transition:
     }, [prefix, pathname, search, hash]);
 
     useEffect(() => {
-      const onWindowPopstate = () => {
-        if (shouldTransitionBetweenPages) {
-          document.startViewTransition(() => {
+      const onNavigation = async (direction: NavigationDirection) => {
+        if (transition) {
+          transition(direction, () => {
             setPathname(sanitizePath(window.location.pathname));
           });
 
@@ -273,18 +320,28 @@ export const createRouter = <Path extends string>({ pages, fallback, transition:
         }
 
         setPathname(sanitizePath(window.location.pathname));
+      }
+
+      const onNavigationForward = () => {
+        onNavigation(NavigationDirection.Forward);
       };
 
-      window.addEventListener("popstate", onWindowPopstate);
+      const onNavigationBackward = () => {
+        onNavigation(NavigationDirection.Backward);
+      };
+
+      window.addEventListener(NavigationDirection.Forward, onNavigationForward);
+      window.addEventListener(NavigationDirection.Backward, onNavigationBackward);
 
       return () => {
-        window.removeEventListener("popstate", onWindowPopstate);
+        window.removeEventListener(NavigationDirection.Forward, onNavigationForward);
+        window.removeEventListener(NavigationDirection.Backward, onNavigationBackward);
       }
     }, []);
 
     return (
       <Context.Provider value={value}>
-        <ErrorBoundary fallback={issue} transition={shouldTransitionBetweenPages}>
+        <ErrorBoundary fallback={issue}>
           {children}
         </ErrorBoundary>
       </Context.Provider>
@@ -306,7 +363,9 @@ export const createRouter = <Path extends string>({ pages, fallback, transition:
 
     if (page) {
       return (
-        <page.element parameters={parameters} />
+        <div >
+          <page.element parameters={parameters} />
+        </div>
       );
     }
 
@@ -319,4 +378,4 @@ export const createRouter = <Path extends string>({ pages, fallback, transition:
     View,
     Provider,
   };
-}
+}

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "1.1.0",
+  "version": "2.0.1",
   "homepage": "https://github.com/aminnairi/react-router#readme",
   "license": "MIT",
   "bugs": {
@@ -26,5 +26,14 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0"
+  },
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
-}
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "esModuleInterop": true,
+    "isolatedModules": true
+  }
+}