@aminnairi/react-router 2.0.1 → 2.2.0

package/README.md

@@ -690,6 +690,45 @@ createPage({
 });
 ```
 
+You can also provide a custom render function as the second argument to fully control the rendered output. This is useful when you want to use a different component library or need more control over the markup.
+
+```tsx
+import { Fragment } from "react";
+import { createPage, useLink, UseLinkRenderFunction } from "@aminnairi/react-router";
+
+const user = createPage({
+  path: "/users/:user",
+  element: function User({ parameters: { user } }) {
+    return <h1>User#{user}</h1>;
+  },
+});
+
+createPage({
+  path: "/about",
+  element: function About() {
+    const CustomLink = useLink(user, ({ path, onClick, children }) => {
+      return (
+        <button className="nav-button" onClick={onClick}>
+          {children}
+        </button>
+      );
+    });
+
+    return (
+      <Fragment>
+        <h1>About</h1>
+        <CustomLink parameters={{ user: "123" }}>User#123</CustomLink>
+      </Fragment>
+    );
+  },
+});
+```
+
+The render function receives an object with the following properties:
+- `path`: The computed URL path with parameters filled in
+- `onClick`: The click event handler that prevents default navigation and handles routing
+- `children`: The children passed to the link component
+
 ### useSearch
 
 Allow you to get one or more search query from the URL.
@@ -849,6 +888,7 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`2.1.0`](#210)
 - [`2.0.1`](#201)
 - [`2.0.0`](#200)
 - [`1.1.0`](#110)
@@ -857,6 +897,21 @@ See [`LICENSE`](./LICENSE).
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 2.1.0
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+- Added optional `render` parameter to `useLink` hook for custom render functions
+- Added `UseLinkRenderFunction` type for custom render function signatures
+
+#### Bug & security fixes
+
+None.
+
 ### 2.0.1
 
 #### Major changes

package/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback, memo, MouseEvent } from "react";
+import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback, memo, MouseEvent, ComponentProps, JSXElementConstructor, ElementType, ComponentPropsWithoutRef, MouseEventHandler } from "react";
 
 export type AbsolutePath<Path extends string> =
   Path extends `${infer Start}:${string}/${infer Rest}`
@@ -228,30 +228,38 @@ export const useHash = () => {
   return hash;
 };
 
-export const useLink = <Path extends string>(page: Page<Path>) => {
-  const Link = memo(({ children, parameters }: { children: ReactNode, parameters: Parameters<Path> }) => {
+export type LinkProps<Path extends string> = {
+  children: ReactNode,
+  parameters: Parameters<Path>
+}
+
+export type UseLinkRenderFunction = (props: { path: string, onClick: MouseEventHandler, children: ReactNode }) => ReactNode
+
+export const useLink = <Path extends string>(page: Page<Path>, render?: UseLinkRenderFunction) => {
+  const Link = memo(({ children, parameters }: LinkProps<Path>) => {
     const { prefix } = useContext(Context);
     const navigateToPage = useNavigateToPage(page);
 
-    const pathWithParameters = useMemo(() => {
+    const path = useMemo(() => {
       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) => {
+    const onClick = useCallback((event: MouseEvent) => {
       event.preventDefault();
       navigateToPage(parameters);
     }, [navigateToPage, parameters]);
 
+    if (render) {
+      return render({ path, onClick, children });
+    }
+
     return (
-      <a
-        href={pathWithParameters}
-        onClick={navigate}>
+      <a href={path} onClick={onClick}>
         {children}
       </a>
     );
-
   });
 
   return Link;

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "homepage": "https://github.com/aminnairi/react-router#readme",
   "license": "MIT",
   "bugs": {
@@ -34,6 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.9.3"
   }
 }