@aminnairi/react-router 1.0.1 → 1.1.0

package/README.md

@@ -735,6 +735,40 @@ createPage({
 });
 ```
 
+### useLink
+
+Allow you to navigate to another page using a JSX component instead of a callback as for the `useNavigateToPage` hook.
+
+The created component is simply a `<a href="...">{children}</a>` under the hood which prevents the default behavior of the navigator which is to create a new HTTP request and to reload the page. The `href` attribute is computed from the page path and its parameters.
+
+```tsx
+import { Fragment } from "react";
+import { createPage, useLink } from "@aminnairi/react-router";
+
+const user = createPath({
+  path: "/users/:user",
+  element: function User({ parameters: { user }}) {
+    return (
+      <h1>User#{user}</h1>
+    );
+  }
+});
+
+createPage({
+  path: "/about",
+  element: function About() {
+    const Link = useLink(user);
+
+    return (
+      <Fragment>
+        <h1>About</h1>
+        <Link parameters={{ user: "123" }}>User#123</Link>
+      </Fragment>
+    );
+  }
+});
+```
+
 ### useSearch
 
 Allow you to get one or more search query from the URL.
@@ -976,11 +1010,26 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`1.1.0`](#110)
 - [`1.0.1`](#101)
 - [`1.0.0`](#100)
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 1.1.0
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+- Added a new `useLink` hook to create components that allow for navigating to another page
+
+#### Bug & security fixes
+
+None.
+
 ### 1.0.1
 
 #### Major changes

package/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback } from "react";
+import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback, memo, MouseEvent } from "react";
 
 export type AbsolutePath<Path extends string> =
   Path extends `${infer Start}:${string}/${infer Rest}`
@@ -187,8 +187,6 @@ export const useNavigateToPage = <Path extends string>(page: Page<Path>) => {
       return path.replace(`:${parameterName}`, parameterValue);
     }, initialPath);
 
-    console.log({ initialPath, pathWithParameters });
-
     if (replace) {
       window.history.replaceState(null, pathWithParameters, pathWithParameters);
     } else {
@@ -216,6 +214,35 @@ export const useHash = () => {
   return hash;
 };
 
+export const useLink = <Path extends string>(page: Page<Path>) => {
+  const Link = memo(({ children, parameters }: { children: ReactNode, parameters: Parameters<Path> }) => {
+    const { prefix } = useContext(Context);
+    const navigateToPage = useNavigateToPage(page);
+
+    const pathWithParameters = useMemo(() => {
+      return Object.entries(parameters).reduce((previousPath, [parameterName, parameterValue]) => {
+        return previousPath.replace(`:${parameterName}`, parameterValue);
+      }, sanitizePath(`${prefix ?? ""}/${page.path}`));
+    }, []);
+
+    const navigate = useCallback((event: MouseEvent) => {
+      event.preventDefault();
+      navigateToPage(parameters);
+    }, []);
+
+    return (
+      <a
+        href={pathWithParameters}
+        onClick={navigate}>
+        {children}
+      </a>
+    );
+
+  });
+
+  return Link;
+};
+
 export const createRouter = <Path extends string>({ pages, fallback, transition: withViewTransition, issue, prefix }: CreateRouterOptions<Path>) => {
   const Provider = ({ children }: ProviderProps) => {
     const [pathname, setPathname] = useState(sanitizePath(window.location.pathname));

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "homepage": "https://github.com/aminnairi/react-router#readme",
   "license": "MIT",
   "bugs": {